Okno dialogowe

Okno modalne to specjalny typ wyskakującego okienka, które przerywa użytkownikowi przeglądanie strony internetowej. Chociaż istnieją pewne uzasadnione przypadki użycia wyskakującego okna dialogowego, przed dodaniem takiego okna należy się dobrze zastanowić. Okna modalne zmuszają użytkowników do skupienia się na konkretnych treściach i tymczasowego zignorowania reszty strony.

Okna mogą być:

• Modalne: użytkownicy mogą wchodzić w interakcje tylko z treściami w oknie. Okna modalne są wyświetlane nad zawartością strony. Strona jest ustawiona jako bezwładna i domyślnie zasłonięta półprzezroczystym tłem.
• Niemodalne: użytkownicy mogą wchodzić w interakcje z treściami poza oknem.

Semantyczny element HTML <dialog> do tworzenia okna zawiera semantykę, interakcje klawiatury oraz wszystkie właściwości i metody interfejsu HTMLDialogElement.

Okna modalne

Oto przykład okna modalnego: <dialog>. Kliknij Otwórz okno modalne. Po otwarciu okna można je zamknąć na 3 sposoby: klawiszem Escape, przesyłając formularz za pomocą przycisku z ustawionym atrybutem formmethod="dialog" (lub jeśli sam formularz ma ustawiony atrybut method="dialog") oraz metodą HTMLDialogElement.close().

Klasa HTMLDialogElement ma 3 główne metody oraz wszystkie metody odziedziczone po klasie HTMLElement.

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

Ponieważ element <dialog> został otwarty za pomocą metody HTMLDialogElement.showModal(), jest to okno modalne. Otwarcie okna modalnego powoduje dezaktywację i zasłonięcie wszystkich elementów poza samym oknem. Gdy najedziesz kursorem na interfejs poza oknem, wszystkie elementy będą zachowywać się tak, jakby ustawiono pointer-events: none;. Nawet przycisk otwierający okno nie będzie reagować na interakcje.

Po otwarciu okna fokus zostanie przeniesiony do niego. Fokus jest ustawiony na pierwszym elemencie w sekwencyjnej kolejności nawigacji za pomocą klawiatury w tym oknie. Jeśli wielokrotnie naciśniesz klawisz tab, gdy okno modalne jest otwarte, zaznaczenie może zostać przeniesione tylko na zawartość okna. Wszystko poza oknem modalnym pozostaje nieaktywne.

Po zamknięciu okna (modalnego lub nie) zaznaczenie wraca do elementu, który je otworzył. Unikaj automatycznego otwierania okna bez działania użytkownika. Jeśli musisz to zrobić, upewnij się, że fokus wróci do miejsca, w którym znajdował się 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. Gdy okno modalne jest otwierane za pomocą showModal(), domyślnie następuje dezaktywacja. Atrybut nie jest ustawiony bezpośrednio.

Tło, które zasłania wszystko oprócz okna, można stylizować za pomocą pseudoelementu ::backdrop. Tło jest wyświetlane tylko wtedy, gdy element <dialog> jest wyświetlany za pomocą metody .showModal(). Ten pseudoelement pasuje do wszystkich teł, w tym do tła wyświetlanego, gdy używany jest interfejs FullScreen API, np. podczas oglądania filmu w trybie pełnego ekranu, który nie ma takiego samego formatu obrazu jak ekran lub monitor.

Okna niemodalne

HTMLDialogElement.show() podobnie otwiera okno, ale bez dodawania tła i bez powodowania, że coś stanie się nieaktywne. Klawisz Escape zamyka tylko modalne okna dialogowe, a nie niemodalne. Z tego powodu jeszcze ważniejsze jest uwzględnienie metody zamykania okna niemodalnego. Jeśli opcja zamknięcia znajduje się poza oknem, zaznaczenie wróci do elementu, który otworzył okno. To nie jest idealne rozwiązanie.

Chociaż przycisk zamykania okna nie jest oficjalnie wymagany przez specyfikację, uznaj go za wymagany. Widoczny przycisk, który może być zaznaczony, poprawia dostępność i wygodę użytkowników.

Zamykanie okna

Nie potrzebujesz metody HTMLDialogElement.close(), aby zamknąć okno. JavaScript nie jest w ogóle potrzebny. Aby zamknąć element <dialog> bez JavaScriptu, dodaj formularz z metodą dialog, ustawiając method="dialog" w elemencie <form> lub formmethod="dialog" w przycisku.

Gdy użytkownik przesyła dane za pomocą metody dialog, stan danych wprowadzonych przez użytkownika jest zachowywany. Podczas zdarzenia przesyłania formularz przechodzi walidację ograniczeń (chyba że ustawiono novalidate). Dane użytkownika nie są usuwane ani przesyłane. Przycisk zamykania możesz utworzyć bez użycia JavaScriptu:

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

W tym przykładzie możesz zauważyć atrybut autofocus ustawiony w tagu zamykającym <button>. Elementy z atrybutem autofocus ustawionym w elemencie <dialog> są zaznaczane podczas wczytywania strony tylko wtedy, gdy strona została już wczytana z widocznym oknem. Jeśli strona nie została załadowana, te elementy zostaną zaznaczone po otwarciu okna.

Po otwarciu okna dialogowego zaznaczany jest pierwszy element, który można zaznaczyć, chyba że inny element ma ustawiony atrybut autofocus. Ustawienie atrybutu autofocus na przycisku zamykania zapewnia, że po otwarciu okna dialogowego zostanie on zaznaczony. Jednak umieszczenie autofocus w <dialog> powinno być dobrze przemyślane. Wszystkie elementy w sekwencji, które znajdują się przed elementem z autofokusem, są pomijane. Więcej informacji o tym atrybucie znajdziesz w module dotyczącym ostrości.

Interfejs HTMLDialogElement zawiera właściwość returnValue. Przesłanie formularza z atrybutem method="dialog" ustawia atrybut returnValue na wartość name (jeśli jest dostępna) przycisku przesyłania użytego do przesłania formularza. Jeśli zapiszemy <button type="submit" name="toasty">close</button>, returnValue będzie toasty.

Gdy okno jest otwarte, obecny jest atrybut logiczny open, co oznacza, że okno jest aktywne i można z nim wejść w interakcję. Gdy okno jest otwierane przez dodanie atrybutu open, a nie za pomocą .show() lub .showModal(), jest ono 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.

Chociaż JavaScript jest preferowaną metodą otwierania okna, dołączenie atrybutu open podczas wczytywania 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 aplikacji tabindex

Element, który jest aktywowany, aby otworzyć okno, oraz przycisk zamknięcia, który się w nim znajduje (i ewentualnie inne treści), mogą być zaznaczone 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 niejawna to dialog. Jeśli okno jest oknem potwierdzenia, które przekazuje komunikat wymagający odpowiedzi lub potwierdzenia użytkownika, ustaw role="alertdialog". Dodaj nazwę na potrzeby ułatwień dostępu do okna. Jeśli widoczny tekst może stanowić nazwę na potrzeby ułatwień dostępu, dodaj aria-labelledby="idOfLabelingText".

Domyślne ustawienia CSS

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

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat elementu dialog.

Jak stylizować obszar za oknem?

Za pomocą pseudoelementu ::background.

Spróbuj ponownie.

Za pomocą pseudoelementu ::backdrop.

Dobrze!

Z właściwością background.

Spróbuj ponownie.