Das dialog-Element: Fenster im Fenster
Dialogfenster, die sich über die Seite legen, waren jahrzehntelang reine Handarbeit: div drüberlegen, Hintergrund abdunkeln, Fokus einfangen, Escape-Taste verdrahten. Das <dialog>-Element bringt das alles von Haus aus mit. Passt natürlich hervorragend zu einer Website die sowieso aussieht wie ein Stapel Fenster.
Syntax und Beispiel
HTML plus JavaScript
<dialog id="hinweis">
<p>Diskette wirklich formatieren?</p>
<button id="zu">Lieber nicht</button>
</dialog>
<button id="auf">Dialog öffnen</button>
<script>
const d = document.getElementById("hinweis");
document.getElementById("auf").onclick = () => d.showModal();
document.getElementById("zu").onclick = () => d.close();
</script>Modal oder nicht modal
Es gibt zwei Öffnungsarten und der Unterschied ist entscheidend. showModal() macht den Dialog modal: Die restliche Seite ist blockiert, der Fokus bleibt im Dialog gefangen, Escape schließt ihn und der Hintergrund lässt sich über das CSS-Pseudoelement ::backdrop abdunkeln. show() öffnet ihn dagegen nicht-modal, die Seite dahinter bleibt bedienbar. Für Bestätigungen und Warnungen willst du fast immer die modale Variante. Ein von Anfang an offener Dialog geht auch ohne JavaScript, mit dem Attribut open, ist dann aber nie modl.
Formulare im Dialog
Ein Formular mit method="dialog" schließt beim Absenden den Dialog, statt Daten an den Server zu schicken. Der Wert des gedrückten Buttons landet dabei in der Eigenschaft returnValue. Damit baut man saubere Ja/Nein-Abfragen fast ohne eigene Logik.
Typische Fehler
- Weiterhin div-Konstruktionen als Dialog verkleiden und Fokusfalle plus Escape selbst nachbauen, obwohl das Element alles mitbringt.
- show() verwenden und sich wundern, dass man hinter dem Dialog weiterklicken kann.
- Dialoge für alles: Wichtige Inhalte gehören auf die Seite. Ein Dialog unterbricht, das sollte er sich verdient habn.
Der Formular-Trick: method="dialog"
Das dialog-Element und Formulare sind füreinander gebaut: Ein form mit method="dialog" schließt beim Absenden den Dialog, ganz ohne JavaScript-Schließlogik, und der Wert des gedrückten Buttons landet als Ergebnis im Dialog:
<dialog id="frage">
<p>Änderungen verwerfen?</p>
<form method="dialog">
<button value="abbrechen">Abbrechen</button>
<button value="verwerfen">Verwerfen</button>
</form>
</dialog>Im Skript fragt man danach frage.returnValue ab und weiß, welcher Knopf es war. Das ist das eingebaute Frage-Antwort-Muster für Bestätigungsdialoge, robuster als jede selbstgebaute Lösungg.
Gutes Benehmen für Dialoge
Auch mit perfekter Technik bleibt die Design-Frage: Wann darf man Nutzer überhaupt unterbrechen? Die ehrliche Antwort: selten. Ein Dialog ist gerechtfertigt wenn eine Entscheidung nicht warten kann (ungespeicherte Änderungen, Löschbestätigung), nicht für Newsletter-Bettelei beim Seitenaufruf. Und wer unterbricht, macht es kurz: eine Frage, zwei Knöpfe, Escape funktioniert immer. Alles Längere gehört auf eine eigene Seite statt in ein Fenster über dem Fensterr.