Okno modalne to specjalny typ wyskakującego okienka na stronie internetowej. Wyskakujące okienko, które przerywa użytkownikowi skupienie się na nim. Istnieją pewne przypadki wyświetlania okna dialogowego, ale zanim to zrobisz, warto się nad tym zastanowić. Okna modalne zmuszają użytkowników do skupienia się na konkretnej treści i chwilowo ignorowania reszty strony.
Okna mogą być modalne (można wchodzić tylko z treścią w oknie) lub niemodalne (z zawartością można wchodzić poza okno). Okna modalne są wyświetlane nad pozostałą częścią zawartości strony. Pozostała część strony jest nieaktywna i domyślnie przesłonięta przez półprzezroczyste tło.
Semantyczny element HTML <dialog> służący do tworzenia okna zawiera semantykę, interakcje z klawiaturą oraz wszystkie właściwości i metody interfejsu HTMLDialogElement.
Okna modalne
Oto przykład elementu modalnego <dialog>. Otwórz okno, klikając przycisk „Otwórz okno modalne”. Po otwarciu możesz je zamknąć na 3 sposoby: za pomocą klawisza Escape, przesłania formularza za pomocą przycisku z ustawionym formmethod="dialog" (lub gdy w formularzu jest ustawiony parametr method="dialog") i metody HTMLDialogElement.close().
HTMLDialogElement ma 3 główne metody oraz wszystkie metody dziedziczone z HTMLElement.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Ten obiekt <dialog> został otwarty za pomocą metody HTMLDialogElement.showModal(), dlatego jest to okno modalne. Otwarcie okna modalnego dezaktywuje i ukrywa wszystko poza samym oknem. Jeśli najedziesz kursorem na interfejs poza oknem, zobaczysz, że wszystkie elementy działają tak, jakby element pointer-events: none; był ustawiony. Nawet przycisk otwierający okno nie reaguje na interakcje.
Po otwarciu okna dialogowego element zostaje przeniesiony do niego. Zaznaczenie jest ustawiane na pierwszym elemencie w kolejności sekwencyjnej nawigacji z klawiatury w danym oknie.
Jeśli wielokrotnie naciskasz klawisz tab, zauważysz, że w otwartym oknie modalnym aktywne są tylko treści widoczne w oknie. Dopóki okno jest otwarte, wszystko poza oknem modalnym pozostaje bez zmian.
Gdy okno jest zamknięte, w trybie modalnym lub nie, zaznaczenie jest zwracane do elementu, który je otworzył. Jeśli automatycznie otworzysz okno, które nie zależy od działania użytkownika, zastanów się nad tym. W razie potrzeby upewnij się, że zaznaczenie jest w miejscu, w którym znajdowało się przed otwarciem okna, zwłaszcza wtedy, gdy użytkownik zamknie okno bez wchodzenia z nim w interakcję.
Istnieje globalny atrybut inert, za pomocą którego można wyłączyć element i wszystkie jego elementy podrzędne – z wyjątkiem wszystkich aktywnych okien. Gdy okno modalne jest otwarte za pomocą showModal(), bezwładność lub dezaktywacja jest bezpłatna; atrybut nie jest wyraźnie ustawiony.
Tło, które zasłania wszystko poza oknem, możesz dostosować za pomocą pseudoelementu ::backdrop. Tło jest wyświetlane tylko wtedy, gdy <dialog> jest wyświetlany za pomocą metody .showModal(). Ten pseudoelement pasuje do wszystkich tła, w tym tego wyświetlanego, gdy używany jest FullScreen API, np. podczas oglądania filmu w trybie pełnoekranowym, który ma inny współczynnik proporcji niż ekran lub monitor.
Okna inne niż modalne
HTMLDialogElement.show() podobnie otwiera okno, ale nie dodaje tła ani nie wywołuje neutralności.
Klawisz Escape nie zamyka okien innych niż modalne. Z tego względu jeszcze ważniejsze jest dodanie metody zamykania niemodalnego okna. Jeśli w takim przypadku zbliża się do okna, zaznaczony będzie element, który je otworzył, co nie jest najlepszym rozwiązaniem dla użytkownika.
Specyfikacja nie wymaga oficjalnie przycisku zamykającego okno, ale możesz go uznać za wymagany. Klawisz Escape zamyka okno modalne, ale nie okno modalne. Widoczny przycisk, który może się zaznaczyć, zwiększa ułatwienia dostępu i poprawia wrażenia użytkowników.
Zamykanie okna
Aby zamknąć okno, nie potrzebujesz metody HTMLDialogElement.close(). W ogóle nie potrzebujesz JavaScriptu. Aby zamknąć plik <dialog> bez JavaScriptu, dołącz formularz z metodą dialogową, ustawiając method="dialog" w elemencie <form> lub formmethod="dialog" na przycisku.
Gdy użytkownik przesyła pliki za pomocą metody dialog, stan danych wprowadzonych przez użytkownika zostaje zachowany. Gdy wystąpi zdarzenie przesłania, formularz przechodzi weryfikację ograniczeń (chyba że ustawiona jest zasada novalidate), dane użytkownika nie zostaną wyczyszczone ani przesłane.
Przycisk zamykania bez JavaScriptu można zapisać w ten sposób:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Być może udało Ci się zauważyć w tym przykładzie atrybut autofocus w momencie zamknięcia <button>. Elementy z atrybutem autofocus ustawionym w obrębie typu <dialog> nie będą uwzględniane podczas wczytywania strony (chyba że strona zostanie wczytana z widocznym oknem). Zostaną one jednak zaznaczone po otwarciu okna dialogowego.
Domyślnie po otwarciu okna dialogowego aktywny jest pierwszy element, który można zaznaczyć, chyba że inny element w tym oknie ma ustawiony atrybut autofocus. Ustawienie atrybutu autofocus na przycisku zamykania sprawia, że jest on aktywny po otwarciu okna. Jednak uwzględnianie parametru autofocus w obrębie <dialog> należy przeprowadzać tylko z dużą rozwagą. Wszystkie elementy w sekwencji poprzedzające element z ustawieniem automatycznym są pomijane.
Omówimy ten atrybut dokładniej w lekcji skupienia.
Interfejs HTMLDialogElement zawiera usługę returnValue. Gdy prześlesz formularz z atrybutem method="dialog", returnValue zostanie ustawiony na name (jeśli występuje), z przycisku przesyłania, który służy do przesłania formularza. Gdybyśmy wpisali <button type="submit" name="toasty">close</button>, returnValue miałby wartość toasty.
Po otwarciu okna widoczny jest atrybut logiczny open, co oznacza, że okno jest aktywne i można z nim wchodzić w interakcje. Po otwarciu okna dialogowego przez dodanie atrybutu open, a nie za pomocą .show() czy .showModal(), okno jest pozbawione modalnego charakteru. Właściwość HTMLDialogElement.open zwraca wartość true lub false w zależności od tego, czy okno jest dostępne do interakcji – nie jest to okno modalne.
Chociaż JavaScript jest preferowaną metodą otwierania okna, w tym za pomocą atrybutu open podczas wczytywania strony, a potem usunięcia go za pomocą .close(), może zapewnić wyświetlenie okna nawet wtedy, gdy nie jest JavaScript.
Informacje dodatkowe
Nie używaj: tabindex
Element, który wyświetla się w celu otwarcia okna, i zawierający się w nim przycisk zamykania (i ewentualnie inna zawartość), mogą stać się aktywne i interaktywne. Element <dialog> nie jest interaktywny i nie jest zaznaczony. Nie dodawaj właściwości tabindex do samego okna.
Role ARIA
Rola domyślna to dialog. Jeśli okno to okno potwierdzenia z ważną wiadomością, która wymaga potwierdzenia lub innej odpowiedzi użytkownika, ustaw role="alertdialog".
Okno powinno też mieć nazwę na potrzeby ułatwień dostępu. Jeśli widoczny tekst może zawierać nazwę na potrzeby ułatwień dostępu, dodaj właściwość aria-labelledby="idOfLabelingText".
Domyślne ustawienia CSS
Pamiętaj, że przeglądarki określają styl domyślny dialog. Przeglądarki Firefox, Chrome i Edge color: CanvasText; background-color: Canvas; i Safari ustawiają color: black; background-color: white; w swoich arkuszach stylów klienta użytkownika. Element color jest dziedziczony z elementu dialog, a nie z elementu body czy :root, co może być nieoczekiwane. Właściwość background-color nie jest dziedziczona.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat elementu okna.
W jaki sposób stylujesz obszar za oknem?
::background.::backdrop.background.