WIKI

Modální okna jsou interaktivní prvek Webové stránky, který překrývá hlavní obsah a vyžaduje od uživatele interakci. Běžně jsou implementována pomocí JavaScriptu pro zajištění dynamického chování. Nicméně, je možné vytvořit základní modální okno využívající pouze CSS. Tento článek popisuje kroky, jak dosáhnout tohoto cíle.

1. Základní struktura HTML

Prvním krokem je vytvoření základní HTML struktury pro modální okno. To zahrnuje definici kontejneru pro modální okno a tlačítko pro jeho aktivaci.

<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Toto je modální okno.</p>
    </div>
</div>

<button id="modalBtn">Otevřít modální okno</button>

2. Stylování modálního okna pomocí CSS

Nyní je potřeba stylovat modální okno pomocí CSS. Bude potřeba skrýt modální okno, dokud není aktivováno, a poté ho zobrazit nad obsahem stránky s semi-transparentním pozadím.

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

3. Využití CSS pro zobrazení a skrytí modálního okna

Pro zobrazení a skrytí modálního okna využijeme pseudo-třídu :target. Tato technika umožňuje změnit styly elementu, který je cílem aktuálního URL. Tedy, při kliknutí na tlačítko se URL změní a aktivuje se modální okno.

#modal:target {
    display: block;
}

4. Implementace zavíracího mechanismu

K zavření modálního okna využijeme odkaz, který změní fragment URL tak, aby nebyl žádný element cílem. Toho dosáhneme přidáním tlačítka zavření do modálního okna, které odkazuje zpět na stránku.

<a href="#" class="close">&times;</a>

Pomocí výše uvedených kroků je možné vytvořit základní modální okno pouze s použitím HTML a CSS. Tato metoda poskytuje jednoduchý způsob, jak implementovat modální okna bez potřeby JavaScriptu. Nicméně, pro složitější interakce a dynamické úpravy obsahu modálního okna je vhodné zvážit využití JavaScriptu.