Dialog

Okno dialogowe to przydatny element reprezentujący wszelkiego rodzaju okna HTML i dowiedz się, jak to 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 wyświetlają się u góry pozostałej części strony. Pozostałe strony jest bezczynna i domyślnie zasłonięta półprzezroczystym tłem.

Semantyczny element HTML <dialog> służący do tworzenia dialogu zawiera semantykę, interakcje z klawiaturą oraz wszystkie właściwości i metody interfejsu HTMLDialogElement.

Okna modalne

Oto przykład modalnego <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().

Funkcja HTMLDialogElement ma 3 główne metody, wraz ze wszystkimi metodami odziedziczonymi z HTMLElement.

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

Ponieważ to miejsce <dialog> zostało otwarte przez: 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.

Po otwarciu okna zaznaczenie zostanie przeniesione do niego. 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 zwykłego okna dialogowego zaznaczenie wraca do elementu, który otworzyło okno. Jeśli automatycznie otwarcie okna dialogowego niezwiązanego z działaniem użytkownika, rozważ ponowne rozważenie zakupu. 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. Po otwarciu okna modalnego za pomocą funkcji showModal() bezwładność lub dezaktywacja są bezpłatne. atrybut nie jest jednoznacznie ustawiany.

Tło, które zasłania wszystko oprócz dialogu, można sformatować za pomocą pseudoelementu ::backdrop. Tło wyświetla się tylko wtedy, gdy wyświetlana jest strona <dialog> 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. Dzięki temu jeśli znajdziesz się bliżej poza oknem, fokus zostanie skierowany na element. które otworzyły okno, co może nie być wygodne dla użytkowników.

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żna zaznaczyć, ułatwia dostępność i użytkowników.

Zamykanie okna

Aby zamknąć okno, nie musisz używać metody HTMLDialogElement.close(). Nie potrzebujesz JavaScriptu. Aby zamknąć aplikację <dialog> bez JavaScriptu, dołącz formularz z metodą dialogową, ustawiając method="dialog" na <form> lub formmethod="dialog" na przycisk.

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 ustawiono parametr novalidate), ale dane użytkownika nie są ani usuwane, ani przesyłane. Przycisk zamykania bez JavaScriptu można zapisać tak:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Być może zauważyłeś już atrybut autofocus ustawionym na zamykającym elemencie <button> w tym przykładzie. 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). Elementy te zostaną zaznaczone po otwarciu okna.

Po otwarciu okna dialogowego domyślnie zostanie zaznaczony 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 zamykania zapewnia otrzymuje zaznaczenie po otwarciu okna dialogowego. Uwzględnienie jednak autofocus w elemencie <dialog> powinno być podejmowane z dużym rozważeniem. Wszystkie elementy sekwencji, które występują przed elementem z automatycznym osadzeniem, są pomijane. Dalej omawiamy ten atrybut w tej lekcji.

Interfejs HTMLDialogElement zawiera właściwość returnValue. Przesyłając formularz za pomocą method="dialog", ustawiasz returnValue na name, jeśli tylko jest to możliwe, w przycisku przesyłania użytym do przesłania formularza. Gdybyśmy napisali <button type="submit" name="toasty">close</button>, returnValue byłoby toasty.

Po otwarciu okna atrybut wartość logiczna open co oznacza, że okno jest aktywne i można z nim wejść w interakcję. Gdy okno dialogowe zostanie otwarte przez dodanie atrybutu open zamiast za pomocą atrybutu .show() lub .showModal(), nie będzie ono modalne. HTMLDialogElement.open zwraca wartość true lub false, w zależności od tego, czy okno jest dostępne do interakcji, czy nie jest modalne.

JavaScript jest preferowaną metodą otwierania okna, w tym używaniem atrybutu open podczas wczytywania strony, a następnie usuwaniem go za pomocą .close(), może pomóc zapewnić dostępność okna, nawet jeśli JavaScript nie jest.

Informacje dodatkowe

Nie używaj tabindex

Element, którego kliknięcie powoduje otwarcie okna, oraz znajdujący się w nim przycisk zamykania (i ewentualnie inne treści) mogą i interaktywne. Element <dialog> nie jest interaktywny i nie może być zaznaczony. Nie dodawaj właściwości tabindex. do samego okna.

Role ARIA

Pośrednia rola to dialog. Jeśli okno to okno potwierdzenia przesyłają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. Zestaw Firefox, Chrome i Edge 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ć nieoczekiwane. Właściwość background-color nie jest dziedziczona.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat elementu dialogu.