Skrypt 10: Proste okno modalne (pokaż/ukryj)

Teoria

Okno modalne ("wyskakujące okienko" na tle przyciemniającym resztę strony) do pokazania dodatkowych informacji, potwierdzenia akcji albo formularza, bez przechodzenia na inną podstronę.

Kod (JavaScript)

<button id="otworzModal">Zobacz szczegóły</button>

<div id="modal" style="display: none;">
    <div class="modal-tresc">
        <p>Szczegółowe informacje o produkcie...</p>
        <button id="zamknijModal">Zamknij</button>
    </div>
</div>

<script>
    const modal = document.getElementById("modal");

    document.getElementById("otworzModal").addEventListener("click", function () {
        modal.style.display = "flex";
    });

    document.getElementById("zamknijModal").addEventListener("click", function () {
        modal.style.display = "none";
    });

    // zamknięcie też po kliknięciu w ciemne tło poza treścią modala
    modal.addEventListener("click", function (event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    });
</script>

Komentarz i wyjaśnienie kodu

event.target to element, który FAKTYCZNIE został kliknięty — sprawdzenie event.target === modal odróżnia kliknięcie w ciemne tło (zamyka modal) od kliknięcia w treść wewnątrz modala (nie powinno go zamykać). Ten sam mechanizm nasłuchiwania na całym kontenerze, z rozróżnieniem przez event.target, jest bardzo częstym wzorcem w interfejsach webowych.

Typowe błędy

Częsty błąd to brak sprawdzenia event.target — kliknięcie GDZIEKOLWIEK w obrębie modala (łącznie z jego treścią) zamykałoby okno, co jest mylące dla użytkownika.