HTML <dialog> – Modal

<dialog> ist ein HTML-Element für Dialogfenster, Hinweise und Bestätigungen.

Es kann auf zwei Arten geöffnet werden:

  • Modal: Der Dialog liegt über der Seite und blockiert den Inhalt dahinter.
  • Nicht-modal: Der Dialog ist geöffnet, die restliche Seite bleibt bedienbar.

Ein Dialog wird erst sichtbar, wenn er geöffnet wird:

  • per JavaScript mit showModal() oder show()
  • deklarativ mit commandfor und command="show-modal"

Dialog ohne JavaScript

Das folgende Beispiel öffnet den Dialog mit commandfor und command="show-modal" ohne JavaScript.

Ein nativer Dialog

Dieser Dialog wird direkt mit HTML geöffnet und geschlossen.

 
<button commandfor="myDialog" command="show-modal">
  Dialog öffnen
</button>

<dialog id="myDialog" closedby="any" aria-labelledby="dialogTitle">
  <h2 id="dialogTitle">Ein nativer Dialog</h2>
  <p>Dieser Dialog funktioniert ohne JavaScript.</p>

  <form method="dialog">
    <button>Schliessen</button>
  </form>
</dialog>

Was bedeuten die wichtigen Teile?

<dialog id="...">

Das <dialog>-Element ist der Container für den Dialog. Es ist standardmässig verborgen und wird über seine id mit einem Button verbunden.

Dialog öffnen und schliessen

commandfor verweist auf die id des Dialogs. command="show-modal" öffnet ihn modal, command="close" schliesst ihn. 

<button commandfor="myDialog" command="show-modal">
  Dialog öffnen
</button>

<dialog id="myDialog">
  <p>Dialog-Inhalt</p>
  <button commandfor="myDialog" command="close">
    Schliessen
  </button>
</dialog>

<form method="dialog">

Ein Formular mit method="dialog" hat eine besondere Funktion:

  • Buttons innerhalb dieses Formulars schliessen den Dialog automatisch
  • Kein JavaScript ist zum Schliessen des Dialogs notwendig.

Der value des geklickten Buttons wird dabei in dialog.returnValue gespeichert.

<form method="dialog">
  <button value="cancel">Abbrechen</button>
  <button value="confirm">OK</button>
</form>

aria-labelledby / aria-describedby

Diese Attribute sorgen für bessere Accessibility.

  • aria-labelledby verweist auf den Titel des Dialogs
  • aria-describedby verweist auf die Beschreibung oder den Erklärungstext

Screenreader können dadurch korrekt vorlesen, worum es im Dialog geht. 

<dialog
  aria-labelledby="dialogTitle"
  aria-describedby="dialogDesc">
</dialog>

Dialog mit JavaScript

JavaScript kommt dazu, wenn die Anwendung auf das Öffnen, Schliessen oder den Rückgabewert reagieren soll.

See the Pen Das <dialog>-Tag (HTML Dialog / Modal) by Intensivstation (@intensivstation) on CodePen.

Dialog – UX & Robustheit

Dieses Beispiel baut auf dem vorherigen Code-Beispiel auf und zeigt typische UX- und Robustheits-Details, die im Alltag schnell wichtig werden, aber oft vergessen gehen.

See the Pen Dialog – UX & Robustheit by Intensivstation (@intensivstation) on CodePen.

Dialog schliessen mit closedby

Mit closedby wird festgelegt, durch welche Benutzeraktionen der Dialog automatisch geschlossen werden kann.

  • any – Schliessanfragen und Klick ausserhalb des Dialogs
  • closerequest – Schliessanfragen wie die ESC-Taste
  • none – keine automatische Benutzeraktion

Explizite Buttons oder JavaScript können den Dialog unabhängig davon weiterhin schliessen.

<dialog closedby="any">
  ...
</dialog>

Ob ein Klick ausserhalb den Dialog schliessen soll, bleibt eine Design-Entscheidung.

Fokus und autofocus

Bei einem modalen Dialog übernimmt der Browser das Fokus-Handling. Mit autofocus wird festgelegt, welches Element beim Öffnen den Fokus erhält: 

<button value="cancel" autofocus>Abbrechen</button>

Gerade bei kritischen Aktionen (Löschen, Überschreiben) ist es oft sinnvoll, Abbrechen als Default zu wählen.

Nach dem Schliessen wird der Fokus zum auslösenden Element zurückgegeben.

Fazit:
Dieses zweite Beispiel zeigt keinen „anderen Dialog“, sondern zusätzliche Details für einen robusten Dialog.