Dialoge

Manche Fragen müssen beantwortet sein, bevor es weitergeht. „Rezept wirklich löschen?“ ist so eine. Ein Popover könnte sie stellen, aber nicht auf die Antwort warten, denn ein Klick daneben, und die Frage ist weg. Für so etwas gibt es dialog.

01 / 04Ein Dialog, der die Seite sperrt

<button commandfor="loeschen" command="show-modal">Rezept löschen</button>

<details>
  <summary>Linsensuppe</summary>
  <p>Gespeichert am 03.10.2026.</p>
</details>

<dialog id="loeschen">
  <p>Das Rezept wirklich löschen?</p>
  <button commandfor="loeschen" command="close">Doch nicht</button>
</dialog>

Ein Klick auf „Rezept löschen“ öffnet den Dialog. Die Seite dahinter wird leicht abgedunkelt, und solange er offen ist, lässt sich dort nichts bedienen, auch „Linsensuppe“ klappt nicht auf. Ein Klick daneben schließt ihn nicht, anders als beim Popover. Zu geht er über den Knopf darin oder mit Escape.

Dafür stehen zwei Attribute am Knopf. commandfor nennt die id des Elements, auf das der Knopf wirkt, und command sagt, was er damit tun soll. show-modal öffnet den Dialog modal, also so, dass der Rest der Seite gesperrt ist, und close schließt ihn wieder.

Neu ist das nicht mehr ganz. Seit Dezember 2025 können es alle großen Browser: Chrome und Edge ab Version 135, Firefox ab 144 und Safari ab 26.2. Davor ging das modale Öffnen nur über die JavaScript-Funktion showModal(), und ältere Anleitungen erklären es deshalb noch so.

02 / 04Schließen über ein Formular

<button commandfor="portionen" command="show-modal">Portionen ändern</button>

<dialog id="portionen">
  <form method="dialog">
    <p>Für wie viele Personen?</p>
    <button value="2">2 Personen</button>
    <button value="4">4 Personen</button>
  </form>
</dialog>

<form method="dialog"> ist ein Sonderfall. Beim Abschicken geht nichts an einen Server, stattdessen schließt sich der Dialog, in dem das Formular steht. Welcher Knopf es war, merkt sich der Dialog in seiner Eigenschaft returnValue, hier also 2 oder 4. Nach dem Schließen verrät das die Eingabezeile der Console mit document.querySelector("dialog").returnValue.

Auswerten lässt sich die Antwort nur mit JavaScript, ein Server bekommt davon nichts mit. Das Schließen selbst kommt aber ohne aus, und für eine Frage wie „Wirklich löschen?“ reicht das, wenn ohnehin ein Skript die Antwort verarbeitet.

03 / 04Ein Dialog, der nur so tut

<dialog open>
  <p>Das Rezept wirklich löschen?</p>
</dialog>

<details>
  <summary>Linsensuppe</summary>
  <p>Gespeichert am 03.10.2026.</p>
</details>

Hier steht der Dialog von Anfang an da, weil er das Attribut open trägt, so wie details damit aufgeklappt startet. Modal ist er damit nicht. Hinter ihm lässt sich „Linsensuppe“ aufklappen, als wäre nichts, und Escape tut gar nichts. Eine Meldung gibt es dazu nicht, der Dialog steht ja sichtbar da.

Wer den Rest der Seite sperren will, öffnet ihn deshalb über einen Knopf mit command="show-modal". Genauso still bleibt übrigens ein Tippfehler im Kommando. command="showModal", geschrieben wie die JavaScript-Funktion, tut einfach nichts.

04 / 04Popover oder Dialog

Ein Popover passt zu allem, was neben der Seite auftaucht und mit einem Klick daneben wieder gehen darf: ein Hinweis, ein Menü, eine Erklärung. Ein modaler Dialog passt zu allem, was eine Antwort braucht, bevor es weitergeht. Die Frage dahinter ist, ob man weiterarbeiten darf, ohne zu antworten. Wenn ja, reicht ein Popover.