Jak vytvořit Lightbox pouze pomocí HTML

Úvod

Lightbox je nástroj pro webdesign, který zobrazí obsah (obrázky, text…) v malé krabici uprostřed obrazovky po kliknutí na odkaz. Většina řešení používá JavaScript, ale můžete dosáhnout podobného efektu pouze pomocí HTML a CSS.

Krok 1 – Přidejte styl

Otevřete libovolný textový editor (např. Notepad) a v hlavičce stránky vložte následující CSS kód:

<style type="text/css">
.black_overlay{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:black;
    z-index:1001;
    opacity:0.8;
}
.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>

Krok 2 – Definujte obsah Lightboxu

V těle stránky vložte libovolný HTML obsah, který chcete zobrazit v Lightboxu. Například:

<div id="lightbox" class="white_content">
    <p>Zde můžete umístit text, obrázky nebo video.</p>
    <a href="#" onclick="document.getElementById('lightbox').style.display='none';document.getElementById('overlay').style.display='none';return false;">Zavřít</a>
</div>
<div id="overlay" class="black_overlay"></div>

Krok 3 – Přidejte tlačítko pro zavření

Uvnitř white_content umístěte odkaz Zavřít, který skryje jak obsah, tak překrytí.

Krok 4 – Vytvořte odkaz, který Lightbox otevře

Přidejte odkaz, který po kliknutí zobrazí oba elementy:

<a href="#" onclick="document.getElementById('lightbox').style.display='block';document.getElementById('overlay').style.display='block';return false;">Klikněte zde</a>

Tip

• Lightbox se hodí pro prezentaci obrázků, videí nebo dalších informací přímo na stránce.