<dialog>

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

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>

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.

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>

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

• Chrome

  Komplett

  Volle Unterstützung

• Firefox

  Komplett

  Volle Unterstützung seit Firefox 98

• Safari

  Komplett

  Volle Unterstützung seit Safari 15.4

• Edge

  Komplett

• Opera

  Komplett

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.

• Apple Mail

  Keine

  Dialog-Element wird ignoriert, Inhalt wird nicht angezeigt.

• Gmail

  Keine

  Entfernt das dialog-Element und seinen Inhalt.

• Outlook

  Keine

  Keine Unterstützung für interaktive Elemente.

• Thunderbird

  Keine

  Dialog-Element wird nicht gerendert.

• Yahoo Mail

  Keine

  Entfernt dialog-Elemente komplett.