[CSS] Efekt Lightbox prawie bez JavaScriptu

Na pewno się spotkaliście z takim efektem, że jak kliknęliście jakieś zdjęcie do powiększenia to tło pod nim się robiło takie szaro-przezroczyste, chciałem Wam pokazać jak można to osiągnąć praktycznie nie korzystając z JavaScriptu do generowania Lightboxa

Jest pełno gotowych kodów JavaScript by osiągnąć ten efekt, ale każdy swoje waży. Ten sposób praktycznie ogranicza się tylko CSS, co maksymalnie ogranicza wagę efektu.

Zacznę najpierw od kodu CSS, który wygląda następująco:

.czarne_tlo {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #000000;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
.biala_tresc {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid #b30000;
	background-color: #ffffff;
	z-index: 1002;
	overflow: auto;
}

Jak zapewne zauważyliście, użyłem kodu CSS w wersji 3 dla klasy czarne_tlo, by osiągnąć efekt przezroczystości w przeglądarkach.
Teraz przedstawię przykładowy kod HTML, który zawiera minimalne ilości JavaScript, by zdefiniować zachowanie po kliknięciu w linki:

<p>Bla bla bla jakis tekst na stronie. Aby wyświetlić lightboxa na stronie kliknij: <a href = "javascript:void(0)" onclick = "document.getElementById('normalny').style.display='block';document.getElementById('przejscie').style.display='block'">TUTAJ</a>
        </p>
        <div id="normalny" class="biala_tresc">
        	To jest treść lightboxa. Jakiś sobie tekst. Kliknij, aby <a href = "javascript:void(0)" onclick = "document.getElementById('normalny').style.display='none';document.getElementById('przejscie').style.display='none'">ZAMKNĄĆ</a>
        </div>
        <div id="przejscie" class="czarne_tlo">
        </div>

Jak widać, aby osiagnąć ten efekt, naprawdę niewiele trzeba. Można z tego skorzystać na stronach dynamicznych dodając obsługę PHP czy AJAXu. Ten przykład jest statyczny dla ułatwienia przykładu.
Tutaj możecie znaleźć demo z tego artykułu.