CSS INTENSIVSTATION

HTML <dialog> – Modal

dialog ist ein natives HTML-Element für Popups / Modals / Bestätigungsfenster. Es kann:

  • als Modal geöffnet werden (blockiert Interaktion mit der Seite)
  • oder als normales Fenster (nicht-modal) angezeigt werden

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

  • per JavaScript: showModal() oder show()
  • oder per HTML-Formular-Mechanik (method="dialog"), um ihn zu schliessen

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

Was bedeuten die wichtigen Teile?

<dialog id="...">

Das <dialog>-Element ist der eigentliche Container für das Modal. Es ist standardmässig unsichtbar und wird erst sichtbar, wenn es geöffnet wird.

Ohne Öffnungsmethode (show() oder showModal()) bleibt der Dialog verborgen.

showModal() vs. show()

Es gibt zwei Arten, einen Dialog zu öffnen:

  • showModal()
    Öffnet den Dialog als modal.
    Der Hintergrund wird blockiert und ein Backdrop wird angezeigt.
  • show()
    Öffnet den Dialog nicht-modal.
    Die Seite bleibt weiterhin bedienbar.

In den meisten UI-Fällen wird showModal() verwendet.

<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.addEventListener("close", ...)

Das close-Event wird ausgelöst, sobald der Dialog geschlossen wird.

Typische Anwendungsfälle:

  • Auswertung von dialog.returnValue
  • Reaktion auf Abbrechen oder Bestätigen
  • Zurücksetzen von Formularen oder Status

Das Event feuert unabhängig davon, ob der Dialog per Button, ESC-Taste oder programmatisch geschlossen wurde.

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.

cancel-Event (ESC / Abbrechen durch Benutzer)

Neben dem close-Event gibt es beim <dialog>-Element auch ein cancel-Event.

  • Es wird ausgelöst, wenn der Benutzer den Dialog abbricht
  • z. B. durch die ESC-Taste

Damit kann man explizit zwischen „bewusst geschlossen“ und „abgebrochen“ unterscheiden. 

dialog.addEventListener("cancel", () => {
  console.log("Dialog wurde abgebrochen");
});

Optional kann das Abbrechen verhindert werden: 

dialog.addEventListener("cancel", (e) => {
  e.preventDefault();
});

dialog.open – Schutz vor Mehrfach-Öffnen

showModal() wirft einen Fehler, wenn der Dialog bereits offen ist.

Darum prüft man im produktiven Code oft vorher: 

if (!dialog.open) {
  dialog.showModal();
}

dialog.open ist ein Boolean und zeigt an, ob der Dialog aktuell geöffnet ist.

Backdrop-Klick (bewusste UX-Entscheidung)

Ein Klick auf den dunklen Hintergrund schliesst einen Dialog nicht automatisch.

Wenn man dieses Verhalten möchte, muss man es selbst implementieren: 

dialog.addEventListener("click", (e) => {
  const rect = dialog.getBoundingClientRect();
  const inside =
    rect.top <= e.clientY && e.clientY <= rect.bottom &&
    rect.left <= e.clientX && e.clientX <= rect.right;

  if (!inside) dialog.close("backdrop");
});

Wichtig: Das ist keine technische Pflicht, sondern eine Design-Entscheidung.

Fokus sauber zurückgeben

Beim Öffnen eines Dialogs übernimmt der Browser automatisch das Fokus-Handling.

Beim Schliessen sollte der Fokus aber bewusst zurückgegeben werden, z. B. auf den Button, der den Dialog geöffnet hat: 

dialog.addEventListener("close", () => {
  openButton.focus();
});

Das verbessert:

  • Tastatur-Navigation
  • Accessibility
  • das generelle UI-Gefühl

autofocus – sinnvolle Standard-Aktion

Mit autofocus kann gesteuert werden, welcher Button beim Öffnen aktiv ist: 

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

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

Fazit:
Dieses zweite Beispiel zeigt keinen „anderen Dialog“, sondern die Details, die einen simplen Dialog produktionstauglich machen.