Native Interaktion: das dialog-Element

Ein echtes Modal, ganz ohne eigenes CSS-Overlay

Erinnert ihr euch an den Modal-Backdrop aus dem CSS-Kapitel? position: fixed, z-index, ein abgedunkelter Hintergrund mit rgb(0 0 0 / 0.6), alles von Hand gebaut. Das <dialog>-Element bringt genau das fertig mit:

<dialog id="hinweis">
  <p>Das ist ein Modal-Fenster.</p>
</dialog>

<button id="oeffnen">Hinweis anzeigen</button>

document.querySelector("#oeffnen").addEventListener("click", () => {
  document.querySelector("#hinweis").showModal();
});

• Ein <dialog> ist standardmäßig unsichtbar - egal was drinsteht
• showModal() öffnet es modal: der Rest der Seite wird automatisch abgedunkelt und ist nicht mehr klickbar, bis das Dialog geschlossen wird
• Für dieses eine showModal() braucht ihr eine Zeile JavaScript - einen deklarativen, JS-freien Weg zum Öffnen gibt es aktuell nicht
• Die Esc-Taste schließt ein modales Dialog automatisch - ganz ohne eigenen Code

Schließen ganz ohne JavaScript: <form method="dialog">

Zum Öffnen braucht ihr die eine Zeile JavaScript von oben. Zum Schließen nicht - dafür reicht ein Formular mit method="dialog" innerhalb des Dialogs:

<dialog id="bestaetigung">
  <p>Wirklich löschen?</p>
  <form method="dialog">
    <button value="abbrechen">Abbrechen</button>
    <button value="loeschen">Löschen</button>
  </form>
</dialog>

• method="dialog" sorgt dafür, dass ein Klick auf irgendeinen Submit-Button im Formular das Dialog schließt, statt die Seite neu zu laden
• Das funktioniert für jeden Button im Formular - “Abbrechen” und “Löschen” schließen beide das Dialog, ganz ohne dass ihr selbst close() aufrufen müsst

Tipp

Das ist der empfohlene Weg, ein Dialog zu schließen: Öffnen braucht zwangsläufig eine Zeile JavaScript, Schließen braucht gar keins. So bleibt der JavaScript-Anteil minimal.

Praxisbeispiel: Bestätigungsdialog

<dialog id="confirm-dialog">
  <h2>Änderungen verwerfen?</h2>
  <p>Ungespeicherte Änderungen gehen verloren.</p>
  <form method="dialog">
    <button value="cancel">Abbrechen</button>
    <button value="discard" autofocus>Verwerfen</button>
  </form>
</dialog>

<button id="open-confirm">Verwerfen...</button>

document.querySelector("#open-confirm").addEventListener("click", () => {
  document.querySelector("#confirm-dialog").showModal();
});

#confirm-dialog {
  border: none;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}

#confirm-dialog::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

Tipp

autofocus auf dem “gefährlicheren” oder häufigeren Button ist praktisch, weil Enter dann sofort diese Aktion auslöst - aber überlegt euch bei destruktiven Aktionen (wie hier “Verwerfen”), ob das wirklich die gewünschte Standard-Auswahl ist.

Den Hintergrund stylen: ::backdrop

Der abgedunkelte Hintergrund hinter einem modalen Dialog ist selbst ein Pseudo-Element, das ihr anpassen könnt:

dialog::backdrop {
  background-color: rgb(0 0 0 / 0.7);
  backdrop-filter: blur(4px);
}

dialog {
  border: none;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
}

Hinweis

::backdrop existiert nur, während das Dialog mit showModal() geöffnet ist. Bei show() (nicht-modal, siehe unten) gibt es keinen Backdrop - logisch, denn der Rest der Seite soll ja weiter bedienbar bleiben.

Modal oder nicht: show() vs. showModal()

Methode	Verhalten
show()	öffnet das Dialog, Rest der Seite bleibt bedienbar
showModal()	öffnet modal: Rest der Seite abgedunkelt, nicht bedienbar, Fokus bleibt im Dialog gefangen

Achtung

show() (nicht-modal) ist der seltenere Fall - für ein “richtiges” Modal-Fenster wollt ihr fast immer showModal(). Nur damit bekommt ihr die Hintergrund-Abdunkelung, die Esc-Taste und den automatischen Fokus.

Fortgeschritten: Schließen per JavaScript - für später, wenn ihr JS könnt

Die Formular-Lösung von oben reicht für die allermeisten Fälle. Wollt ihr das Dialog aber auch ohne Klick auf einen Formular-Button schließen (z.B. nach einem erfolgreichen API-Aufruf), geht das per JavaScript:

const dialog = document.querySelector("#hinweis");

dialog.close(); // schließt das Dialog

Nutzt ihr <form method="dialog">, landet der value des geklickten Buttons zusätzlich in dialog.returnValue - damit lässt sich per JavaScript auslesen, welcher Button gedrückt wurde:

dialog.addEventListener("close", () => {
  console.log(dialog.returnValue); // "abbrechen" oder "loeschen"
});