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.
Jak dopasujesz styl do obszaru za oknem?
background
.::background
.::backdrop
.