Startseite >Web >HTML-Referenz – Elemente und Attribute >dialog – Dialogfenster

dialog – Dialogfenster

<dialog id="box">…</dialog>

Ein Dialogfenster. Geschlossen ist es ausgeblendet. Die Methode showModal() öffnet es modal: über der Seite, mit abgedunkeltem Hintergrund, der Rest der Seite reagiert nicht mehr und die Esc-Taste schließt das Fenster. Die Methode show() öffnet es, ohne die Seite zu blockieren. Fokus, Stapelung und die Rückgabe des Fokus nach dem Schließen übernimmt der Browser.

  • Standarddarstellung: display: none, offen block
  • End-Tag: erforderlich
  • Inhalt: Fließinhalt
  • Wo es stehen darf: überall, wo Fließinhalt erlaubt ist
  • DOM-Schnittstelle: HTMLDialogElement

Attribute

  • open – das Fenster ist offen (nicht modal). Zum Öffnen die Methoden verwenden, nicht das Attribut.
  • closedby – was es schließt: any (auch ein Klick außerhalb des Fensters), closerequest (Esc), none. Chrome seit 134, Firefox seit 141, Safari bisher nur in der Vorschauversion (Stand: Oktober 2026).

Beispiele

Ein Bestätigungsfenster – ein Formular mit method="dialog" schließt das Fenster und speichert den Wert der Schaltfläche in returnValue:

<button type="button" id="open">Bestellung löschen</button>
<dialog id="confirm" aria-labelledby="confirm-heading">
  <h2 id="confirm-heading">Wirklich löschen?</h2>
  <form method="dialog">
    <button type="submit" value="no">Behalten</button>
    <button type="submit" value="yes">Löschen</button>
  </form>
</dialog>
<script>
  var box = document.getElementById('confirm');
  document.getElementById('open').addEventListener('click', function () { box.showModal(); });
  box.addEventListener('close', function () {
    if (box.returnValue === 'yes') { /* löschen */ }
  });
</script>

Der abgedunkelte Hintergrund eines modalen Fensters:

<dialog class="box">…</dialog>

.box::backdrop {
  background: rgb(0 0 0 / 0.5);
}
.box {
  border: 0;
  border-radius: 12px;
  max-width: min(90vw, 480px);
}

Barrierefreiheit

Ein modales Fenster hat die Rolle dialog und Screenreader bieten den Inhalt außerhalb davon nicht an. Das Fenster braucht einen Namen – eine Überschrift, die über aria-labelledby verbunden ist. Nach dem Öffnen setzt der Browser den Fokus in das Fenster, nach dem Schließen gibt er ihn an das Element zurück, das es geöffnet hat.

Worauf Sie achten sollten

  • Ein Fenster, das mit dem Attribut open oder mit show() geöffnet wurde, ist nicht modal: Esc schließt es nicht, es hat kein ::backdrop und die Seite darunter reagiert weiter.
  • Ein Klick auf den abgedunkelten Hintergrund schließt das Fenster nicht von selbst – das tut erst closedby="any", in älteren Browsern ein Skript.
  • Ein modales Fenster liegt im top layer über der ganzen Seite; weder z-index noch overflow: hidden beim Elternelement begrenzen es.
  • Der Browser sperrt beim Öffnen nicht das Scrollen der Seite unter dem Fenster. Abhilfe schafft body:has(dialog:modal) { overflow: hidden; }.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit März 2022, gilt als weithin verfügbar seit September 2024. Ab Version: Chrome 37, Firefox 98, Safari 15.4. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
form – Formular
button – Schaltfläche
details – Aufklappbereich
popover – Popover (Attribut)
inert – inaktiver Seitenbereich (Attribut)