Dialog

Okno modalne to specjalny rodzaj wyskakującego okienka na stronie internetowej: wyskakujące okienko, które przerywa użytkownikowi skupienie się na nim. Istnieją kilka uzasadnionych przypadków użycia wyskakujących okienek, ale warto wziąć pod uwagę przed podjęciem decyzji. Okna modalne wymuszają na użytkownikach skupienie się na określonej treści i, przynajmniej tymczasowo, ignorowanie reszta strony.

Okna mogą być modalne (można wchodzić w interakcje tylko z treścią okna) lub niemodalne (z możliwością interakcji). treściami poza oknem). 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> do tworzenia okna obejmuje semantykę, interakcje z klawiaturą oraz wszystkie właściwości i metody interfejsu HTMLDialogElement.

Okna modalne

Oto przykład modalnego <dialog>. Otwórz okno „Otwórz okno modalne” Przycisk Okno można zamknąć na 3 sposoby: używając klawisza Escape, przesyłając formularz przycisk z atrybutem formmethod="dialog" (lub jeśli w formularzu jest ustawiona metoda method="dialog") oraz metoda 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 wyłączenie i zasłonięcie wszystkiego oprócz samego okna. Jeśli najedź kursorem na interfejs poza oknem, zobaczysz, że wszystkie elementy zachowują się tak, jakby pointer-events: none; została ustawiona; nawet przycisk otwierający okno nie reaguje na interakcje.

Po otwarciu okna zaznaczenie zostanie przeniesione do niego. Zaznaczenie jest ustawiane na pierwszym elemencie w kolejności sekwencyjnej nawigacji za pomocą klawiatury w tym oknie. Jeśli naciśniesz klawisz tab kilka razy, zauważysz, że podczas gdy okno modalne jest zaznaczone tylko w jego treści, otwartego. Wszystko poza oknem modalnym pozostaje bezczynne, dopóki to okno jest otwarte.

Gdy okno zostanie zamknięte (także w trybie modalnym lub nie), fokus jest zwracany na element, który go otworzył. Jeśli automatycznie otwarcie okna dialogowego niezwiązanego z działaniem użytkownika, rozważ ponowne rozważenie zakupu. W razie potrzeby upewnij się, że zaznaczenie znajduje się z powrotem w miejscu, w którym było przed otwarciem. zwłaszcza wtedy, gdy użytkownik zamknie okno, nie wchodząc z nim w interakcję.

Istnieje globalny atrybut inert, którego można użyć do wyłączenia elementu i wszystkich jego elementów podrzędnych (innych niż aktywne). . Po otwarciu okna modalnego za pomocą funkcji showModal() bezwładność lub dezaktywacja są bezpłatne. atrybut nie jest jednoznacznie ustawiany.

Tło zasłaniające wszystko poza oknem można określić za pomocą: ::backdrop pseudoelementu. Tło jest wyświetlane tylko wtedy, gdy obiekt <dialog> jest wyświetlany przy użyciu metody .showModal(). Ten pseudoelement dopasowuje wszystkie tła, w tym to wyświetlane, gdy używany jest interfejs FullScreen API, np. gdy oglądasz film w trybie pełnoekranowym, w którym proporcje obrazu nie są takie same jak na ekranie lub monitorze.

Okna niemodalne

W podobny sposób interfejs HTMLDialogElement.show() otwiera okno, ale nie dodaje tła ani nie wywołuje żadnych reakcji. Klawisz Escape nie zamyka niemodalnych okien. Z tego powodu jeszcze ważniejsze jest dodanie metody zamknięcia niemodalnego okna. 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 przycisku zamykającego okno, uznaliśmy go za wymagany. Klawisz Escape spowoduje zamknięcie okna modlnego, ale nie innego. Widoczny przycisk, który można zaznaczyć, ułatwia dostępność i użytkowników.

Zamykanie okna

Metoda HTMLDialogElement.close() nie jest potrzebna do zamknięcia okna. W ogóle 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 zostaje zachowany. Gdy wystąpi zdarzenie przesłania – formularz przechodzi weryfikację ograniczeń (chyba że skonfigurowano ustawienie novalidate) – dane użytkownika nie są czyszczone 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 ustawionym w <dialog> nie zostaną odebrane zaznaczenie podczas wczytywania strony (chyba że strona zostanie wczytana z widocznym oknem dialogowym). Elementy te zostaną zaznaczone po otwarciu okna.

Domyślnie po otwarciu okna zostanie zaznaczony pierwszy z nich pierwszy element, który można zaznaczyć, chyba że element w 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 w sekwencji poprzedzające element automatycznie ustawiany są pomijane. Dalej omawiamy ten atrybut w tej lekcji.

Interfejs HTMLDialogElement zawiera returnValue usłudze. Przesłanie formularza z atrybutem method="dialog" ustawia returnValue na name przycisku przesyłania użytego do prześlij formularz. Gdybyśmy napisali <button type="submit" name="toasty">close</button>, returnValue to toasty.

Po otwarciu okna atrybut wartość logiczna open co oznacza, że okno jest aktywne i można z nim wejść w interakcję. Gdy okno jest otwierane przez dodanie atrybutu open zamiast niż za pomocą .show() lub .showModal(), okno będzie bez 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.

Preferowaną metodą otwierania okna dialogowego jest JavaScript, w tym używanie atrybutu open podczas wczytywania strony, a następnie usunięcie 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 jest 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 powinno też mieć nazwę na potrzeby ułatwień dostępu. Jeśli nazwa na potrzeby ułatwień dostępu jest widoczna w widocznym tekście, dodaj aria-labelledby="idOfLabelingText".

Domyślne ustawienia CSS

Pamiętaj, że przeglądarki pozwalają określić styl domyślny dla języka 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. Element color jest dziedziczony 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ę o oknie.