Element dialog jest przydatny do przedstawiania dowolnego rodzaju dialogu w HTML. Dowiedz się, jak działa.
Okno modalne to specjalny typ wyskakującego okienka na stronie internetowej: wyskakujące okienko, które przerywa użytkownikowi, aby zwrócić jego uwagę. Istnieją pewne przydatne przypadki użycia okna, ale przed jego wyświetleniem należy się dobrze zastanowić. Okna modalne zmuszają użytkowników do skupienia się na określonych treściach i przynajmniej tymczasowo ignorowania reszty strony.
Dialogi mogą być modalne (można wchodzić w interakcje tylko z treścią w dialogu) lub niemodalne (możliwe jest nadal wchodzenie w interakcje z treścią poza dialogem). Okna modalne są wyświetlane nad resztą treści strony. Pozostała część strony jest nieaktywna i domyślnie zasłonięta półprzezroczystym tłem.
Semantyczny element HTML <dialog> służący do tworzenia dialogu zawiera semantyczne interakcje z klawiaturą oraz wszystkie właściwości i metody interfejsu HTMLDialogElement.
Okna modalne
Oto przykład modułu <dialog>. Otwórz okno za pomocą przycisku „Otwórz okno modalne”. Po otwarciu okna dialogowego można je zamknąć na 3 sposoby: za pomocą klawisza Esc, przesyłając formularz za pomocą przycisku z przypisaną wartością formmethod="dialog" (lub jeśli sam formularz ma przypisaną wartość method="dialog") oraz za pomocą metody HTMLDialogElement.close().
Obiekt HTMLDialogElement ma 3 główne metody, a także wszystkie metody dziedziczone z obiektu HTMLElement.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Ponieważ to <dialog> zostało otwarte za pomocą metody HTMLDialogElement.showModal(), jest to okno modalne. Otwarcie okna modalnego powoduje dezaktywację i zasłonięcie wszystkiego oprócz samego okna. Jeśli najedziesz kursorem na interfejs poza oknem, zauważysz, że wszystkie elementy zachowują się tak, jakby było ustawione pointer-events: none;. Nawet przycisk otwierający okno nie reaguje na interakcje.
Gdy otworzysz okno, fokus przejdzie do okna. Fokus jest ustawiany na pierwszym elemencie w kolejności nawigacji klawiaturą w danym oknie.
Jeśli wielokrotnie naciśniesz klawisz tab, zauważysz, że podczas otwierania okna modalnego fokus może mieć tylko zawartość okna dialogowego. Dopóki okno modalne jest otwarte, wszystko poza nim jest nieaktywne.
Po zamknięciu okna (modalnego lub nie) zaznaczenie wraca do elementu, który otworzyło to okno. Jeśli otwierasz okno dialogowe programowo, nie na podstawie działania użytkownika, zastanów się jeszcze raz. Jeśli to konieczne, upewnij się, że fokus wraca do miejsca, w którym znajdował się przed otwarciem okna dialogowego, zwłaszcza jeśli użytkownik zamknie okno bez interakcji z nim.
Istnieje globalny atrybut inert, który może służyć do wyłączania elementów i wszystkich ich potomków, z wyjątkiem aktywnego dialogu. Gdy okno modalne jest otwierane za pomocą atrybutu showModal(), bezczynność lub dezaktywacja są bezpłatne, ponieważ atrybut nie jest ustawiany wprost.
Tło, które zasłania wszystko oprócz dialogu, można sformatować za pomocą pseudoelementu ::backdrop. Tłoko jest wyświetlane tylko wtedy, gdy <dialog> jest wyświetlane za pomocą metody .showModal(). Ten pseudoelement pasuje do wszystkich tła, w tym do tego wyświetlanego podczas korzystania z interfejsu FullScreen API, na przykład podczas oglądania filmu w trybie pełnoekranowym, który nie ma takiego samego formatu jak ekran lub monitor.
Okna niemodalne
HTMLDialogElement.show() również otwiera okno dialogowe, ale bez dodawania tła i bez powodowania, że cokolwiek staje się nieaktywne.
Klawisz Escape nie zamyka dialogów niemodalnych. Dlatego jeszcze ważniejsze jest uwzględnienie metody zamykania dialogu niemodalnego. Jeśli przycisk znajduje się poza oknem dialogowym, będzie ono skupiać się na elemencie, który otworzyło okno dialogowe, co może nie być najwygodniejsze dla użytkownika.
Chociaż specyfikacja nie wymaga oficjalnie przycisku zamykania okna, warto go umieścić. Klawisz Escape zamyka okno modalne, ale nie niemodalne. Widoczny przycisk, który może być zaznaczony, zwiększa dostępność i wygodę użytkowników.
Zamknij okno
Aby zamknąć okno, nie musisz używać metody HTMLDialogElement.close(). Nie potrzebujesz JavaScriptu. Aby zamknąć <dialog>
bez JavaScriptu, dodaj formularz z metodą dialogową, ustawiając wartość method="dialog" w elementach <form> lub formmethod="dialog" przycisku.
Gdy użytkownik przesyła dane za pomocą metody dialog, stan danych wprowadzonych przez użytkownika jest zachowany. Podczas zdarzenia przesyłania formularz przechodzi przez walidację ograniczeń (chyba że ustawiony jest parametr novalidate), ale dane użytkownika nie są ani usuwane, ani przesyłane.
Przycisk zamykania bez JavaScriptu może być napisany w ten sposób:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
W tym przykładzie zauważysz, że atrybut autofocus jest ustawiony na wartość close <button>. Elementy z atrybutem autofocus w elementach <dialog> nie będą otrzymywać fokusa podczas wczytywania strony (chyba że strona zostanie załadowana z widocznym oknem dialogowym). Gdy jednak otworzysz okno, będą one aktywne.
Po otwarciu okna dialogowego domyślnie zaznaczany jest pierwszy element, który można zaznaczyć w tym oknie, chyba że inny element w tym oknie ma ustawiony atrybut autofocus. Ustawienie atrybutu autofocus na przycisku Zamknij powoduje, że przycisk ten będzie aktywny po otwarciu okna. Umieszczanie autofocus w ramach <dialog>
powinno być dobrze przemyślane. Wszystkie elementy sekwencji, które występują przed elementem z automatycznym osadzeniem, są pomijane.
Więcej informacji o tym atrybucie znajdziesz w lekcji na temat fokusowania.
Interfejs HTMLDialogElement zawiera właściwość returnValue. Przesyłając formularz za pomocą method="dialog", ustawiasz returnValue na name, jeśli tylko taki przycisk został użyty do przesłania formularza. Gdybyśmy napisali <button type="submit" name="toasty">close</button>, returnValue byłoby toasty.
Gdy okno jest otwarte, występuje atrybut logiczny open, co oznacza, że okno jest aktywne i można z nim wchodzić w interakcję. Gdy okno dialogowe zostanie otwarte przez dodanie atrybutu open zamiast za pomocą atrybutu .show() lub .showModal(), nie będzie ono modalne. Właściwość HTMLDialogElement.open zwraca wartość true lub false, w zależności od tego, czy można wchodzić w interakcję z dialogiem, a nie od tego, czy jest on modalny.
Chociaż JavaScript jest preferowaną metodą otwierania okna, dodanie atrybutu open podczas wczytywania strony, a następnie usunięcie go za pomocą atrybutu .close(), może pomóc w zapewnieniu, że okno będzie dostępne nawet wtedy, gdy JavaScript nie będzie obsługiwany.
Informacje dodatkowe
Nie używaj aplikacji tabindex
Element, który powoduje otwarcie okna dialogowego, oraz znajdujący się w nim przycisk Zamknij (i ewentualnie inne treści) mogą być aktywne i mogą być w centrum uwagi. Element <dialog> nie jest interaktywny i nie może być zaznaczony. Nie dodawaj właściwości tabindex do samego okna dialogowego.
Role ARIA
Domyślna rola to dialog. Jeśli okno dialogowe to okno potwierdzenia zawierające ważną wiadomość, która wymaga potwierdzenia lub innej odpowiedzi użytkownika, ustaw role="alertdialog".
Okno dialogowe 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".
Domyślne wartości CSS
Pamiętaj, że przeglądarki zapewniają domyślny styl dla dialog. Firefox, Chrome i Edge ustawiają color: CanvasText; background-color: Canvas;, a Safari ustawia color: black; background-color: white; w swoich arkuszach stylów klienta użytkownika. Wartość color jest dziedziczona z dialog, a nie z body ani :root, co może być nieoczekiwane. Właściwość background-color nie jest dziedziczona.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat elementu dialogu.
Jak stylizować obszar za oknem dialogowym?
::background.::backdrop.background.