[CSS] Efekt Lightbox prawie bez JavaScriptu
This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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.
About the author
