<dialog>

Zuletzt aktualisiert am 3. Juli 2026

Das <dialog>-Element erstellt ein Dialogfenster direkt in HTML, ohne externe Bibliothek und ohne ein <div> mit CSS manuell ein- und auszublenden. Es unterstützt modale Dialoge (mit Backdrop, die den Rest der Seite blockieren) und nicht-modale Dialoge (die neben dem restlichen Inhalt offen bleiben). Der Browser kümmert sich um Fokus-Management, ESC-Taste und die korrekte Reihenfolge im Accessibility-Tree.

Grundlagen

Vor <dialog> haben Entwickler Modals komplett selbst gebaut: Ein <div> als Overlay, ein weiteres als Dialog-Container, JavaScript für das Öffnen/Schließen, manuelle Fokus-Verwaltung, ESC-Listener und aria-modal-Attribute. <dialog> ersetzt all das durch ein einziges HTML-Element mit einer kleinen API.

• <dialog> ist standardmäßig unsichtbar (display: none)
• showModal() öffnet den Dialog als modales Fenster mit Backdrop und Fokus-Trap
• show() öffnet den Dialog als nicht-modales Fenster ohne Backdrop
• close() schließt den Dialog und gibt optional einen Rückgabewert (dialog.returnValue)
• Das open-Attribut zeigt an, ob der Dialog sichtbar ist. Setz es aber nicht manuell, sondern verwende die Methoden
• ESC schließt modale Dialoge automatisch
• Das ::backdrop-Pseudo-Element erlaubt das Styling des halbtransparenten Hintergrunds
• Formulare mit method="dialog" schließen den Dialog beim Absenden automatisch

Syntax

<button id="open-btn">Dialog öffnen</button>

<dialog id="my-dialog">
  <h2>Willkommen!</h2>
  <p>Das ist ein modaler Dialog.
    Klicke auf Schließen oder drücke ESC.</p>
  <button id="close-btn">Schließen</button>
</dialog>

<script>
  document.getElementById("open-btn")
    .addEventListener("click", () => {
      document.getElementById("my-dialog").showModal();
    });

  document.getElementById("close-btn")
    .addEventListener("click", () => {
      document.getElementById("my-dialog").close();
    });
</script>

Attribute

Beispiele

Bestätigungsdialog mit Formular

Ein Dialog mit method="dialog" auf dem Formular schließt sich automatisch beim Absenden. Der Wert des Submit-Buttons wird als dialog.returnValue gespeichert:

<button id="delete-btn">Konto löschen</button>
<p id="result"></p>

<dialog id="confirm-dialog">
  <h2>Bist du sicher?</h2>
  <p>Diese Aktion kann nicht rückgängig
    gemacht werden.</p>

  <form method="dialog">
    <button value="cancel">Abbrechen</button>
    <button value="confirm">Endgültig löschen</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById("confirm-dialog");

  document.getElementById("delete-btn")
    .addEventListener("click", () => {
      dialog.showModal();
    });

  dialog.addEventListener("close", () => {
    const action = dialog.returnValue === "confirm"
      ? "Konto wurde gelöscht."
      : "Abgebrochen.";
    document.getElementById("result")
      .textContent = action;
  });
</script>

Gestylter Dialog mit Backdrop

Das ::backdrop-Pseudo-Element lässt sich mit CSS stylen. Hier ein Dialog mit einem halbtransparenten dunklen Hintergrund:

<style>
  #my-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
  }

  #my-dialog {
    border: none;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    animation: fadeIn 0.2s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<button id="open-btn">Styled Dialog öffnen</button>

<dialog id="my-dialog">
  <h2>Newsletter abonnieren</h2>
  <p>Erhalte wöchentlich die besten Tipps.</p>
  <input type="email" placeholder="deine@email.de">
  <button>Anmelden</button>
  <button id="close-btn">&times;</button>
</dialog>

Nicht-modaler Dialog

Mit show() statt showModal() öffnest du einen nicht-modalen Dialog. Der Rest der Seite bleibt bedienbar, es gibt keinen Backdrop, und ESC schließt den Dialog nicht automatisch.

<button id="show-tip">Hinweis anzeigen</button>

<dialog id="tip-dialog">
  <p><strong>Tipp:</strong> Du kannst diesen Hinweis
    lesen und gleichzeitig mit der Seite
    interagieren.</p>
  <button id="close-tip">Verstanden</button>
</dialog>

<script>
  // show() statt showModal() = nicht-modal
  document.getElementById("show-tip")
    .addEventListener("click", () => {
      document.getElementById("tip-dialog").show();
    });

  document.getElementById("close-tip")
    .addEventListener("click", () => {
      document.getElementById("tip-dialog").close();
    });
</script>

Dialog oder Popover?

Neben <dialog> gibt es das globale popover-Attribut, mit dem sich Overlays sogar ganz ohne JavaScript öffnen und schließen lassen. Die Faustregel: <dialog> mit showModal() ist die richtige Wahl, wenn der Nutzer reagieren muss und der Rest der Seite so lange blockiert sein soll, etwa bei Bestätigungen und Pflicht-Formularen (Fokus-Trap, Backdrop). Ein Popover ist dagegen nicht-modal: Die Seite bleibt bedienbar, und bei popover="auto" schließt schon ein Klick daneben. Das passt für Menüs, Tooltips, Toasts und andere leichtgewichtige Overlays.

Barrierefreiheit

Das <dialog>-Element hat die implizite ARIA-Rolle dialog. Bei showModal() kümmert sich der Browser um die wichtigsten Accessibility-Aspekte:

• Fokus-Trap: Der Fokus bleibt im Dialog gefangen. Tab und Shift+Tab bewegen den Fokus nur zwischen den interaktiven Elementen im Dialog. Das verhindert, dass Tastaturnutzer versehentlich hinter den Dialog navigieren.
• Fokus-Wiederherstellung: Wenn der Dialog geschlossen wird, wandert der Fokus automatisch zurück zum Element, das den Dialog geöffnet hat.
• ESC zum Schließen: Modale Dialoge lassen sich mit der ESC-Taste schließen, ein Verhalten, das Nutzer von Desktop-Anwendungen erwarten.
• Inert-Markierung: Bei modalen Dialogen markiert der Browser den gesamten restlichen Inhalt der Seite als inert. Screenreader können nur den Dialog-Inhalt wahrnehmen.

Ergänze den Dialog mit einem aria-label oder aria-labelledby, das auf die Überschrift im Dialog verweist. So wissen Screenreader-Nutzer sofort, worum es im Dialog geht.

<dialog aria-labelledby="dialog-title">
  <h2 id="dialog-title">Konto löschen</h2>
  <p>Bist du sicher?</p>
</dialog>

Häufige Fehler

Das open-Attribut manuell setzen: Es ist verlockend, open direkt im HTML zu setzen oder per JavaScript zu togglen. Aber das umgeht die eingebaute Logik von showModal(): kein Backdrop, kein Fokus-Trap, kein ESC-Handler. Verwende immer showModal(), show() und close().

Klick auf Backdrop schließt nicht: Anders als bei vielen JavaScript-Modals schließt ein Klick auf den Backdrop den Dialog nicht automatisch. Wenn du dieses Verhalten willst, musst du es selbst implementieren, zum Beispiel über das click-Event auf dem Dialog-Element und einen Check, ob der Klick außerhalb des Dialogs war.

showModal() statt show() verwechseln: showModal() erstellt einen modalen Dialog mit Backdrop und Fokus-Trap. show() öffnet den Dialog wie ein normales Element: ohne Backdrop, ohne Fokus-Trap, ohne ESC-Handler. Für die meisten Anwendungsfälle (Bestätigungen, Formulare, Warnungen) willst du showModal().

Dialog nicht schließbar machen: Jeder Dialog sollte einen klar sichtbaren Schließen-Button haben. Sich nur auf ESC zu verlassen ist nicht genug: Touch-Geräte haben keine ESC-Taste, und nicht alle Nutzer kennen die Tastenkombination.

Browser-Kompatibilität

Das dialog-Element wird von allen modernen Browsern unterstützt. Die showModal()-API und das ::backdrop-Pseudo-Element funktionieren browserübergreifend.

Email-Kompatibilität

Das dialog-Element wird von keinem E-Mail-Client unterstützt. JavaScript-APIs wie showModal() funktionieren in E-Mails nicht. Für modale Inhalte in E-Mails gibt es keine echte Alternative, der Inhalt muss direkt sichtbar sein.

Verwandte Elemente