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.