chevron-left chevron-right

[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.

  • Leszek

    Mam pytanie otóż skrypt jest rewelacyjny ale jak dodać do tego zdjęcia żeby wyswietlały się jak w liteboxie
    ?

  • Zdjęcie należałoby wstawić do div z id=”normalny” i tam ewentualnie dodać odpowiednie style dla zdjęcia.
    Nie sądzę, by to był jakiś duży problem.
    Mam nadzieję, że dobrze zrozumiałem pytanie 😉

  • brakuje Mi tylko może X – jako zamknij w ramce, ale i nie głupie ;]

  • iks-igrek

    fajnie, zastanawiałem sie właśnie czy da sie tak zrobić – jak widać da. Ja jeszcze dodaje dynamiczne ustawianie wielkosci div’a wg wymiarów wyświetlanej grafiki za pomoca PHP.

  • keis

    Jak zrobić z tego np. okno logowania, lub coś bardziej skomplikowanego.Zamiast normalny wstawiłem grafikę pod okno logowania. mam problem z ustawieniem przycisku zamykającego i nie wiem jak dodać np. przyciski. proszę o pomoc.