Stylowanie modali i okien dialogowych

Element HTML <dialog> zapewnia wbudowane zachowanie modalu: uwięzienie fokusu, zamykanie klawiszem Escape oraz API showModal() / close(). Zamiast tworzyć od podstaw własny szkielet modalu, ostyluj go za pomocą CSS.

Pseudoelement ::backdrop służy do stylizowania nakładki za otwartym elementem <dialog>. Zastosuj półprzezroczyste tło: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Nie jest potrzebny żaden element div pełniący funkcję opakowania.

Wyśrodkuj dialog za pomocą CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Użycie margin: auto na dialogu umieszcza go na środku obszaru widoku bez pozycjonowania za pomocą JS.

Ustaw overflow-y: auto na samym dialogu, aby obsłużyć długą zawartość. Gdy modal się otwiera, ustaw overflow: hidden na body, aby uniemożliwić przewijanie tła — dodawaj i usuwaj klasę za pomocą JavaScriptu, aby przełączać ten stan.

Animuj pojawianie się dialogu za pomocą @starting-style (Chrome 117+), aby tworzyć animacje wejścia wyłącznie w CSS, bez JavaScriptu. Aby zapewnić szerszą obsługę, dodaj za pomocą JavaScriptu klasę open i użyj transition dla transform oraz opacity: slide-up od translateY(20px) do translateY(0).

Animowanie zamykania dialogu jest trudne — dialog natychmiast się ukrywa po wywołaniu close(). Możliwe rozwiązania to użycie popover API, które natywnie obsługuje animacje zamykania, albo przechwycenie zamknięcia za pomocą JavaScriptu, odtworzenie klasy animacji wyjścia, a następnie wywołanie close() po zakończeniu animacji.

Dialogi otwierają się nad całą pozostałą zawartością strony. Unikaj wojen z z-index, korzystając z natywnego kontekstu stosu elementu dialog — jest on renderowany w top layer, nad wszystkimi wartościami CSS z-index, bez konieczności ustawiania z-index na samym dialogu.

Na urządzeniach mobilnych wysuwaj dialogi od dołu jako arkusz: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Na komputerach wyśrodkuj je jako tradycyjny modal, korzystając ze wzorca margin: auto.

Natywny element dialog automatycznie przenosi fokus na pierwszy element, który może go przyjąć, po otwarciu. Zadbaj o logiczną kolejność przechodzenia klawiszem Tab wewnątrz dialogu. Dodaj przycisk zamykania, który po zamknięciu dialogu przywraca fokus elementowi wyzwalającemu, zapewniając prawidłową nawigację za pomocą klawiatury.

Dodaj aria-labelledby wskazujący tytuł dialogu oraz aria-describedby wskazujący jego opis. Rola dialogu jest niejawna dla elementu <dialog>. Czytniki ekranu ogłoszą te etykiety, gdy fokus znajdzie się w dialogu.

Dialogi potwierdzenia powinny zawierać: jasny tytuł w formie pytania, krótki opis skutków, przycisk destrukcyjnej akcji (czerwony, wyrównany do prawej) oraz przycisk anulowania (wyrównany do lewej lub drugorzędny). Użyj autofocus na przycisku anulowania, aby bezpieczny wybór był domyślną akcją wykonywaną z klawiatury.

Jaka jest zaleta użycia natywnego elementu <dialog> zamiast niestandardowego modalu opartego na elemencie div?

Natywny element dialog wraz z ::backdrop, centrowaniem za pomocą margin: auto, kontrolą overflow, animacjami wejścia w CSS i zarządzaniem fokusem zapewnia w pełni dostępny, sterowany CSS-em wzorzec modalu. Responsywne układy arkusza na urządzeniach mobilnych oraz prawidłowe atrybuty ARIA dopełniają gotowy do użycia produkcyjnie komponent dialogu.