[CSS] Efekt Lightbox prawie bez JavaScriptu
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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;
}
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>
Tutaj możecie znaleźć demo z tego artykułu.
O autorze
