Modernes interaktives HTML: dialog, details, popover, contenteditable

Ersetze deine UI-Bibliotheken durch die nativen Primitive des modernen HTML: modale Dialoge, exklusive Akkordeons, Popovers und bearbeitbare Bereiche.

10 Min. · 3 Fragen

<dialog> löst nativ, was Jahre von Modal-Bibliotheken zusammengeschustert haben. showModal() projiziert das Element in den Top Layer - über jeden z-index -, macht den Rest des Dokuments inert (kein Fokus, keine Klicks) und stellt das Pseudo-Element ::backdrop bereit. show() hingegen zeigt einen nicht-modalen Dialog an, ohne Inertheit und ohne Backdrop. Das neue Attribut closedby=any fügt das Schließen durch Klicken außerhalb hinzu.

<dialog id="confirm-dlg">
  <form method="dialog">
    <p>Delete this item?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">Confirm</button>
  </form>
</dialog>

Ein <form method=dialog> schließt den Dialog ohne eine Netzwerkübermittlung: Der value des auslösenden Buttons wird zu dialog.returnValue, den du über das close-Ereignis lesen kannst. Die Escape-Taste schließt einen modalen Dialog, indem sie zuerst cancel auslöst, das du mit preventDefault() abbrechen kannst, falls eine Eingabe im Gange ist.

const dlg = document.getElementById("confirm-dlg");
dlg.showModal();
dlg.addEventListener("close", () => {
  console.log(dlg.returnValue); // "ok" or "cancel"
});

Die Popover-API deckt Menüs, reichhaltige Tooltips und Toasts ohne JavaScript ab: Setze popover auf das Element und popovertarget auf einen Button, und der Browser kümmert sich um den Top Layer, das Light Dismiss (Klick außerhalb, Escape) und das gegenseitige Schließen von auto-Popovers. Anders als showModal() macht ein Popover die Seite nicht inert. Die Ereignisse beforetoggle und toggle erlauben dir, jeden Übergang abzubrechen oder zu beobachten.

<button popovertarget="user-menu">Menu</button>
<div id="user-menu" popover>
  <button>Profile</button>
  <button>Log out</button>
</div>

<details> bietet ohne Skript zugänglichen aufklappbaren Inhalt, und ein gemeinsames name-Attribut erzeugt eine exklusive Gruppe: Das Öffnen eines schließt die anderen. Das toggle-Ereignis wird dort bei jeder Zustandsänderung ausgelöst. Auf der Bearbeitungsseite verwandelt contenteditable jedes Element in einen reichhaltigen Eingabebereich; seine plaintext-only-Variante verbietet jegliches Markup, und das beforeinput-Ereignis ersetzt vorteilhaft die veraltete document.execCommand-API.

<details name="faq" open>
  <summary>Delivery time?</summary>
  <p>Within 48 hours.</p>
</details>
<details name="faq">
  <summary>Return policy?</summary>
  <p>Within 30 days.</p>
</details>

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was bringt showModal() gegenüber show()?
   • Es blockiert die JavaScript-Ausführung, bis der Dialog schließt
   • Es platziert den Dialog im Top Layer, macht den Rest des Dokuments inert und aktiviert ::backdrop
   • Es verhindert nur das Scrollen der Seite
2. Was erzeugt ein identisches name-Attribut an mehreren <details>?
   • Sie werden gemeinsam im übergeordneten Formular übermittelt
   • Nichts: name ist kein gültiges Attribut an details
   • Ein exklusives Akkordeon: Das Öffnen eines schließt automatisch die anderen
3. Was ist der Verhaltensunterschied zwischen einem auto-Popover und einem manual-Popover?
   • auto erhält Light Dismiss (Klick außerhalb, Escape) und schließt die anderen auto-Popovers; manual bleibt offen, bis es ausdrücklich geschlossen wird
   • manual kann nicht in den Top Layer platziert werden
   • auto öffnet sich beim Laden der Seite von selbst