Dialoge und Popover

Overlays gehören zu den Dingen, die früher immer eine Bibliothek gebraucht haben. Inzwischen kann HTML zwei davon selbst.

01 / 03Popover

<button popovertarget="hinweis">Nährwerte anzeigen</button>

<div id="hinweis" popover>
  <h2>Nährwerte je Portion</h2>
  <p>Rund 320 Kalorien, 18 Gramm Eiweiß.</p>
  <button popovertarget="hinweis" popovertargetaction="hide">Schließen</button>
</div>

Probier den Knopf aus. Das Fenster erscheint, ein Klick daneben schließt es wieder, die Escape-Taste ebenso. Ohne eine Zeile JavaScript.

Zwei Attribute machen das:

• popover am Element, das erscheinen soll. Ohne Wert geschrieben bedeutet es popover="auto", und nur auto schließt sich per Klick daneben und mit Escape. Solange es nicht geöffnet ist, bleibt der Inhalt versteckt.
• popovertarget am Knopf, mit der id des Popovers als Wert.

Der Knopf schaltet damit standardmäßig um: öffnen, wenn geschlossen, und schließen, wenn offen. Mit popovertargetaction="show" oder "hide" legst du eine Richtung fest, so wie beim Schließen-Knopf im Beispiel.

Was du dabei geschenkt bekommst, ist wieder mehr als das Ein- und Ausblenden:

• Light Dismiss: Ein Klick außerhalb schließt das Popover.
• Escape schließt es ebenfalls.
• Top Layer: Es erscheint über allem anderen, ganz ohne Kniffe mit Stapelreihenfolge.
• Fokus: Der nächste Tab-Schritt führt ins Popover, egal an welcher Stelle im Markup es steht. Beim Schließen kehrt der Fokus auf den Knopf zurück, sofern er drinnen lag.

Typische Fälle: ein Hinweiskästchen, ein Menü unter einem Knopf, eine Erklärung neben einem Formularfeld, eine Benachrichtigung.

02 / 03dialog

<dialog open>
  <h2>Portionen wählen</h2>

  <form method="dialog">
    <label for="p">Portionen</label>
    <input type="number" id="p" name="p" value="4" min="1" max="12">

    <button type="submit">Übernehmen</button>
  </form>
</dialog>

dialog ist das echte Dialogfenster. Das Boolean-Attribut open zeigt es an, so wie hier.

Interessant daran ist das Formular: <form method="dialog"> ist ein Sonderfall. Beim Abschicken geht nichts an einen Server, stattdessen schließt sich der Dialog. Welcher Knopf es war, steht danach in returnValue, das liest allerdings wieder JavaScript. Das Schließen selbst geht ganz ohne Skript.

Probier es aus: Ein Klick auf „Übernehmen“ schließt den Dialog, und zwar ohne dass irgendwo eine Adresse umspringt. Genau daran erkennt man den Sonderfall. Ein Formular ohne dieses method würde stattdessen abschicken, und dann wäre der Dialog zwar auch weg, aber nur weil die ganze Seite neu geladen wurde.

Wo die Grenze liegt: Ein Dialog, der die Seite blockiert und alles dahinter abdunkelt, wird über showModal() geöffnet, und das ist eine JavaScript-Funktion. Nur mit HTML bekommst du den Dialog also entweder von Anfang an sichtbar oder gar nicht auf. (Es gibt inzwischen einen ganz neuen, rein deklarativen Weg über die Invoker-Commands-API, der ist aber erst seit Ende 2025 in allen Browsern und für den Einstieg hier noch zu frisch.)

Die Faustregel lautet deshalb: Reicht ein Überlagern, nimm popover. Muss der Rest der Seite wirklich blockiert werden, bis der Nutzer entschieden hat, ist es ein modaler dialog, und dafür brauchst du eine Zeile JavaScript.

03 / 03Warum das besser ist als ein div

<button popovertarget="a">Echter Button</button>
<div id="a" popover>
  <p>Mit Tab erreichbar, mit Escape schließbar.</p>
</div>

<div>Nachgebauter Knopf aus einem div</div>

Oben ein echter button mit popovertarget, unten ein div, das seine Rolle übernehmen soll. Hier sieht das div nach nichts aus, weil kein CSS läuft. In einem echten Projekt bekäme es Rahmen und Hintergrund und wäre vom Knopf darüber nicht zu unterscheiden.

Der button ist mit Tab erreichbar, hat einen Fokus-Ring, reagiert auf Eingabe und Leertaste und wird als Schaltfläche angesagt. Das div ist nichts von alledem. Wer mit der Tastatur arbeitet, kommt gar nicht erst hin.

Das ist derselbe Gedanke wie bei details in der letzten Lektion und wie bei den Links ganz am Anfang: Die eingebauten Elemente bringen Tastaturbedienung, Fokus und die richtige Ansage mit. Nachbauen kann man das, aber man muss an alles denken, und meistens denkt man an eins nicht. Der nächste Abschnitt geht genau darauf ein.