Cum să creezi un Lightbox în HTML

Lightbox este un instrument de design web care afișează în centrul ecranului o casetă mică cu imagini, text sau alte conținuturi, atunci când utilizatorul dă clic pe un link.

Mai multe variante de creare a unui lightbox implică JavaScript, însă poți obține un efect similar folosind doar HTML și CSS.

Paso 1

Deschide un editor de text (Notepad, TextEdit etc.) și adaugă codul CSS în secțiunea head a paginii tale. Începe cu:

<style type='text/css'>
.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content{
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
</style>

Paso 2

În corpul paginii (secțiunea body) scrie textul pe care vrei să apară în lightbox, de exemplu:

<div class='white_content'>
    Test... Text...
</div>

Paso 3

Adaugă un buton de închidere, de exemplu:

<button onclick='document.querySelector(".black_overlay").style.display="none"; document.querySelector(".white_content").style.display="none";'>Închide</button>

Paso 4

Creează un link care va declanșa lightboxul. Înlocuiește „Click Here” cu textul dorit:

<a href='#' onclick='document.querySelector(".black_overlay").style.display="block"; document.querySelector(".white_content").style.display="block";'>Click Here</a>

Salvează fișierul. Acum ai un lightbox funcțional folosind doar HTML și CSS.

Tip

• Integrează lightboxul în secțiuni ale site-ului pentru a afișa imagini, video sau alte conținuturi interactive.