Okno dialogowe

Element dialogu to przydatny element do reprezentowania dowolnego rodzaju okna dialogowego w HTML. Dowiedz się, jak działa.

Modalne okno dialogowe to specjalny rodzaj wyskakującego okienka na stronie internetowej, które przerywa działanie użytkownika, aby skupić na sobie jego uwagę. Istnieją uzasadnione przypadki wyświetlania okien, ale przed podjęciem takiej decyzji należy się dobrze zastanowić. Okna modalne zmuszają użytkowników do skupienia się na określonych treściach i przynajmniej tymczasowego zignorowania reszty strony.

Okna dialogowe mogą być modalne (można wchodzić w interakcję tylko z treściami w oknie) lub niemodalne (można wchodzić w interakcję z treściami poza oknem). Okna modalne są wyświetlane nad pozostałą treścią strony. Pozostała część strony jest nieaktywna i domyślnie zasłonięta półprzezroczystym tłem.

Semantyczny element HTML <dialog> do tworzenia okna dialogowego ma semantykę, interakcje z klawiaturą oraz wszystkie właściwości i metody interfejsu HTMLDialogElement.

Okna modalne

Oto przykład modalnego elementu <dialog>. Otwórz okno za pomocą przycisku „Otwórz okno modalne”. Po otwarciu okna możesz je zamknąć na 3 sposoby: za pomocą klawisza Escape, przez przesłanie formularza za pomocą przycisku z ustawionym atrybutem formmethod="dialog" (lub jeśli sam formularz ma ustawiony atrybut method="dialog") oraz za pomocą metody HTMLDialogElement.close().

Klasa HTMLDialogElement ma 3 główne metody oraz wszystkie metody odziedziczone z klasy HTMLElement.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

Ponieważ to okno <dialog> zostało otwarte za pomocą metody HTMLDialogElement.showModal(), jest to okno modalne. Otwarcie okna modalnego dezaktywuje i zasłania wszystko inne poza nim. Jeśli najedziesz kursorem na interfejs poza oknem, zauważysz, że wszystkie elementy zachowują się tak, jakby ustawiona była wartość pointer-events: none;. Nawet przycisk otwierający okno nie reaguje na interakcje.

Po otwarciu okna fokus przenosi się do niego. Fokus jest ustawiany na pierwszym elemencie w sekwencyjnej kolejności nawigacji za pomocą klawiatury w tym oknie. Jeśli wielokrotnie naciśniesz klawisz tab, fokus będzie można przenieść tylko na treści w oknie, gdy jest ono otwarte. Wszystko poza oknem modalnym jest nieaktywne, dopóki okno jest otwarte.

Gdy okno zostanie zamknięte (modalne lub nie), zaznaczenie wraca do elementu, który je otworzył. Unikaj programowego otwierania okna bez działania użytkownika. Jeśli musisz to zrobić, upewnij się, że fokus wraca do miejsca, w którym był przed otwarciem okna, zwłaszcza jeśli użytkownik zamknie okno bez interakcji z nim.

Istnieje globalny atrybut inert, którego można użyć do wyłączenia elementu i wszystkich jego elementów podrzędnych z wyjątkiem aktywnego okna dialogowego. Gdy okno modalne zostanie otwarte za pomocą showModal(), jego bezwładność lub dezaktywacja jest z nim powiązana. Atrybut nie jest ustawiany jawnie.

Tło, które zasłania wszystko poza oknem, można ostylować za pomocą pseudoelementu ::backdrop. Tło jest wyświetlane tylko wtedy, gdy ikona <dialog> jest wyświetlana metodą .showModal(). Ten pseudoelement pasuje do wszystkich teł, w tym do tego, które jest wyświetlane, gdy używany jest interfejs FullScreen API, np. podczas oglądania filmu w trybie pełnoekranowym, który nie ma takiego samego współczynnika proporcji jak ekran lub monitor.

Okna niemodalne

HTMLDialogElement.show() otwiera okno dialogowe, ale nie dodaje tła ani nie powoduje, że nic nie staje się nieaktywne. Klawisz Escape nie zamyka okien niemodalnych. Dlatego jeszcze ważniejsze jest, aby uwzględnić metodę zamykania okna niemodalnego. Jeśli element zamykający znajduje się poza oknem, pamiętaj, że fokus zostanie przeniesiony na element, który otworzył okno, co może nie być najlepszym rozwiązaniem dla użytkownika.

Chociaż specyfikacja nie wymaga oficjalnie przycisku zamykania okna, warto go dodać. Klawisz Escape zamyka okno modalne, ale nie okno niemodalne. Widoczny przycisk, na którym można ustawić fokus, zwiększa dostępność i wygodę użytkowników.

Zamykanie okna

Do zamknięcia okna nie jest potrzebna metoda HTMLDialogElement.close(). Nie potrzebujesz JavaScriptu. Aby zamknąć element <dialog> bez użycia JavaScriptu, dodaj formularz z metodą dialogową, ustawiając atrybut method="dialog" w elemencie <form> lub formmethod="dialog" w przycisku.

Gdy użytkownik przesyła dane za pomocą metody dialog, stan wprowadzonych przez niego danych jest zachowywany. Wprawdzie zdarzenie przesyłania jest wywoływane – formularz przechodzi weryfikację ograniczeń (chyba że ustawiono novalidate) – ale dane użytkownika nie są ani czyszczone, ani przesył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>

W tym przykładzie możesz zauważyć atrybut autofocus ustawiony na zamknięcie <button>. Elementy z atrybutem autofocus ustawionym w <dialog> nie będą otrzymywać fokusu podczas wczytywania strony (chyba że strona jest wczytywana z widocznym oknem). Jednak po otwarciu okna dialogowego zostaną one zaznaczone.

Domyślnie po otwarciu okna dialogowego zaznaczany jest pierwszy element, na którym można ustawić fokus, chyba że inny element w oknie dialogowym ma ustawiony atrybut autofocus. Ustawienie atrybutu autofocus na przycisku zamykania zapewnia, że po otwarciu okna pojawi się na nim fokus. Jednak umieszczanie autofocus w <dialog> powinno być dobrze przemyślane. Wszystkie elementy w sekwencji poprzedzające element z automatycznym fokusem są pomijane. Więcej informacji o tym atrybucie znajdziesz w lekcji poświęconej temu tematowi.

Interfejs HTMLDialogElement zawiera właściwość returnValue. Przesłanie formularza z elementem method="dialog" powoduje ustawienie elementu returnValue na wartość name przycisku przesyłania użytego do przesłania formularza. Gdybyśmy napisali <button type="submit" name="toasty">close</button>, to returnValue byłoby równe toasty.

Gdy okno jest otwarte, występuje atrybut logiczny open, co oznacza, że okno jest aktywne i można z niego korzystać. Jeśli okno dialogowe zostanie otwarte przez dodanie atrybutu open zamiast .show() lub .showModal(), będzie niemodalne. Właściwość HTMLDialogElement.open zwraca wartość true lub false w zależności od tego, czy okno jest dostępne do interakcji, a nie od tego, czy jest modalne.

JavaScript to preferowana metoda otwierania okna, ale uwzględnienie atrybutu open podczas ładowania strony, a następnie usunięcie go za pomocą .close() może pomóc w zapewnieniu dostępności okna nawet wtedy, gdy JavaScript nie jest dostępny.

Informacje dodatkowe

Nie używaj tabindex

Element, który jest aktywowany w celu otwarcia okna, oraz przycisk zamykania w nim zawarty (i ewentualnie inne treści) mogą otrzymywać fokus i są interaktywne. Element <dialog> nie jest interaktywny i nie można go zaznaczyć. Nie dodawaj właściwości tabindex do samego okna.

Role ARIA

Rola domyślna to dialog. Jeśli okno dialogowe jest oknem potwierdzenia, które zawiera ważną wiadomość wymagającą potwierdzenia lub innej reakcji użytkownika, ustaw wartość role="alertdialog". Okno powinno też mieć nazwę dostępną dla czytników ekranu. Jeśli widoczny tekst może stanowić nazwę na potrzeby ułatwień dostępu, dodaj aria-labelledby="idOfLabelingText".

Ustawienia domyślne CSS

Pamiętaj, że przeglądarki zapewniają domyślny styl dla elementu dialog. Przeglądarki Firefox, Chrome i Edge ustawiają color: CanvasText; background-color: Canvas;, a Safari ustawia color: black; background-color: white; w arkuszach stylów klienta użytkownika. Wartość color jest dziedziczona z dialog, a nie z body ani :root, co może być zaskakujące. Właściwość background-color nie jest dziedziczona.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elemencie dialogu.