Okno dialogowe <dialog closedby open, button "button" command commandfor, form "dialog", form "dialog", button "dialog">

Okno dialogowe

Okno dialogowe to element znany z różnego typu aplikacji komputerowych w postaci zwykle niewielkiego okienka, wymagającego od użytkownika podjęcia akcji w postaci wykonania jakiegoś zadania albo podania jakichś informacji. Kiedy użytkownik zakończy, okno dialogowe zostaje zamknięte.

W rzeczywistości okno dialogowe jest integralnym elementem strony, a nie osobnym elementem interfejsu przeglądarki. W związku z tym nie wyskakuje on poza obręb karty przeglądarki, jak to ma miejsce w przypadku okien pop-up i pop-under.

Sposób działania okna dialogowego jest bardzo podobny do okienka popover. Istnieją jednak ważne różnice:

• Element tworzący okno dialogowe jest znacznikiem semantycznym, tzn. nadaje treści określone znaczenie (wymaganie od użytkownika podjęcia akcji). Podczas gdy okienko popover nadaje się do tworzenia różnego rodzaju menu kontekstowych i wyskakujących podpowiedzi - bez nadawania im znaczenia.
• Okno dialogowe może być modalne, tzn. treść strony pod nim zostanie zablokowana. Do momentu jego zamknięcia nie będzie się dało np. zaznaczyć tekstu ani kliknąć w żaden element na stronie pod spodem.
• Modalne okno dialogowe blokuje całą stronę pod spodem, a więc uniemożliwia otworzenie nowego okna (chyba że przycisk otwierania znajduje się bezpośrednio na poprzednim). Natomiast popover posiada tryb, w którym otworzenie nowego okienka automatycznie zamyka poprzednie.

Domyślnie otwarte okno dialogowe <dialog open closedby, button "button" command commandfor>

• Wariant podstawowy:

  <dialog open closedby="zamykanie">...</dialog>

• Wariant z oddzielnym przyciskiem zamykania:

  <dialog open id="identyfikator">
  	...
  	<button type="button" commandfor="identyfikator" command="close">Zamknij</buttton>
  </dialog>

• Wariant z oddzielnym przyciskiem i innymi metodami zamykania:

  <dialog open closedby="zamykanie" id="identyfikator">
  	...
  	<button type="button" commandfor="identyfikator" command="close">Zamknij</buttton>
  </dialog>

Okno dialogowe może zostać otwarte od razu po wejściu na stronę, bez potrzeby wykonywania żadnej dodatkowej akcji przez użytkownika. Może to być przydatne w sytuacji, kiedy wymagane jest podjęcie ważnej akcji, zanim w ogóle będzie można przejść do właściwej treści strony. Może to być np. akceptacja regulaminu, potwierdzenie pełnoletności albo wyrażenie zgody na przetwarzanie danych osobowych.

Zaleca się wstawienie w oknie dialogowym oddzielnego przycisku zamykania. Nie dla wszystkich użytkowników może być oczywiste użycie w tym celu klawisza Esc czy nawet kliknięcie poza obszarem okna.

Przykład <dialog open, button "button" commandfor command>

<dialog open id="dialog1">
	<p>Długi tekst, którego i tak nikt nie czyta 😉</p>
	<button type="button" commandfor="dialog1" command="close">Akceptuję regulamin</button>
</dialog>

Modalne okno dialogowe <dialog closedby, button "button" command commandfor>

• Wariant podstawowy:

  <dialog id="identyfikator">...</dialog>
  <button type="button" commandfor="identyfikator" command="show-modal">Otwórz</button>

• Wariant podstawowy z innymi metodami zamykania:

  <dialog closedby="zamykanie" id="identyfikator">...</dialog>
  <button type="button" commandfor="identyfikator" command="show-modal">Otwórz</button>

• Wariant z oddzielnym przyciskiem zamykania:

  <dialog id="identyfikator">
  	...
  	<button type="button" commandfor="identyfikator" command="close">Zamknij</buttton>
  </dialog>
  <button type="button" commandfor="identyfikator" command="show-modal">Otwórz</button>

• Wariant z oddzielnym przyciskiem i innymi metodami zamykania:

  <dialog closedby="zamykanie" id="identyfikator">
  	...
  	<button type="button" commandfor="identyfikator" command="close">Zamknij</buttton>
  </dialog>
  <button type="button" commandfor="identyfikator" command="show-modal">Otwórz</button>

Okno modalne blokuje treść strony znajdującą się pod nim, dopóki nie zostanie zamknięte. Nie da się np. zaznaczyć tekstu ani kliknąć w żaden element na stronie pod spodem. Stosujemy go, aby wymusić na użytkowniku podjęcie decyzji lub zwrócić jego uwagę, zanim będzie mógł kontynuować korzystanie ze strony:

• Akcje wymagające potwierdzenia - gdy operacja jest istotna lub nieodwracalna (np. usunięcie danych)
• Zbieranie kluczowych danych - np. logowanie, płatność, uzupełnienie wymaganych informacji
• Komunikaty krytyczne - błędy, ostrzeżenia lub informacje, których nie można zignorować
• Skupienie uwagi na jednym zadaniu - aby nie rozpraszać użytkownika pozostałą zawartością strony (np. kreator krok po kroku)

Przykład <dialog, button "button" commandfor command>

<dialog id="dialog2">
	<p>Zwróć uwagę, że cała strona pod spodem jest zablokowana.</p>
	<p>Aby to sprawdzić, spróbuj bez zamykania okna zaznaczyć tekst: "Właściwa treść strony...".</p>
	<button type="button" commandfor="dialog2" command="close">Zamknij</button>
</dialog>
<button type="button" commandfor="dialog2" command="show-modal">Otwórz okno modalne</button>
<p>Właściwa treść strony...</p>

Formularz dialogowy <form "dialog", button "dialog">

• Wariant podstawowy:

  <dialog>
  	<form method="dialog">...</form>
  <dialog>

• Nadpisanie metody formularza:

  <dialog>
  	<form>
  		<button formmethod="dialog">...</button>
  	</form>
  <dialog>

Formularz dialogowy jest rodzajem okna dialogowego, które zawiera pola do wypełniania przez użytkownika. Można go stworzyć zarówno jako domyślnie otwarte oraz modane okno dialogowe. Robi się to poprzez umieszczenie wewnątrz elementu <dialog>...</dialog> znacznika formularza, ale z przypisanym atrybutem method="dialog". Możliwe jest również użycie atrybutu formmethod="dialog" na przycisku wysłania formularza.

Formularz dialogowy przydaje się do zbierania kluczowych danych (np. logowanie, płatność, uzupełnienie wymaganych informacji) albo przy tworzeniu kreatorów krok po kroku.

Przykład <dialog open, form "dialog", button "dialog">

<dialog open>
	<form method="dialog">
		<p>Długi tekst, którego i tak nikt nie czyta 😉</p>
		<button type="submit">Zgadzam się</button>
		<button formmethod="get" formaction="https://www.google.pl/" formtarget="_top">Wychodzę ze strony</button>
	</form>
</dialog>

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
<dialog>	37 2014-08-26	98 2022-03-08	79 2020-01-15	24 2014-09-02	15.4 2022-03-14
<dialog closedby>	134 2025-03-04	141 2025-07-22	134 2025-03-06	119 2025-05-13	❌
<dialog open>	37 2014-08-26	98 2022-03-08	79 2020-01-15	24 2014-09-02	15.4 2022-03-14
<button command>	135 2025-04-01	144 2025-10-14	135 2025-04-04	120 2025-07-02	26.2 2025-12-12
<button commandfor>	135 2025-04-01	144 2025-10-14	135 2025-04-04	120 2025-07-02	26.2 2025-12-12