dialog versus popover: modales Verhalten, der Top Layer und Light Dismiss

Worum es geht

Zwei native Primitiven für Inhalte, die über der Seite schweben. Ein mit showModal() geöffnetes <dialog> ist modal: Es wird in den Top Layer gehoben (über jeden Stacking-Kontext), der Rest des Dokuments wird inert, der Fokus wandert hinein, ::backdrop deckt die Seite ab, und Escape löst eine Schliessanfrage aus. show() öffnet es nicht-modal an Ort und Stelle. Das Attribut closedby legt fest, wie es geschlossen werden darf: any (ein Klick ausserhalb, Escape oder Code), closerequest (Escape oder Code; MDN hält fest, dass dies der Standard für showModal() ist) oder none. Ein <form method="dialog"> schliesst den Dialog beim Absenden ohne Anfrage und setzt returnValue auf den Wert des absendenden Buttons. Das Attribut popover macht ein beliebiges Element zu einem nicht-modalen Top-Layer-Overlay, das durch <button popovertarget="id"> ohne Skript umgeschaltet wird; MDN beschreibt popover="auto" als per Light Dismiss schliessbar durch Klick ausserhalb und schliessbar mit Escape, wobei jeweils nur ein Auto-Popover offen sein kann, während manual bis zum expliziten Schliessen bestehen bleibt und hint für Tooltips dient.

Warum es wichtig ist

Menüs, Toasts, Tooltips und Modals brauchten früher einen z-Index-Kampf, eine von Hand geschriebene Fokusfalle und einen Click-outside-Handler. Die nativen Varianten übernehmen Stacking, Schliessen und, bei modalen Dialogen, die Inertheit im Browser, schalten ohne JavaScript um und stellen assistiven Technologien die richtige Rolle bereit.

So wird es angewendet

• Blockierende Eingabeaufforderungen, Bestätigungen, Bearbeitungsformulare: <dialog> plus showModal(), mit autofocus auf dem ersten nützlichen Steuerelement und einem sichtbaren Schliessen-Button.
• Nicht blockierende Menüs, Panels, Tooltips, Toasts: popover; Menüs als auto, Toasts als manual.
• Das Attribut open nicht für ein Modal verwenden (ein so geöffneter Dialog ist nicht-modal) und kein tabindex auf das <dialog>-Element selbst setzen; MDN warnt, dass es nicht interaktiv ist.
• Daten über returnValue und das close-Ereignis zurückgeben statt über geteilten veränderlichen Zustand.
• ::backdrop stylen; beide Elemente sind bis zur Anzeige display: none, daher brauchen Eintrittsübergänge einen Startzustand.

Stolpersteine

Light Dismiss (closedby="any") bei einem Dialog mit halb ausgefülltem Formular verwirft die Eingabe; dort eher closerequest verwenden. Popovers sind nicht modal: Sie fangen den Fokus nicht ein und machen die Seite nicht inert. MDN hält fest, dass ein erfolgreiches showModal() offene Auto-Popover schliesst. Der Fokus kehrt beim Schliessen nur dann zum Auslöser zurück, wenn dieser noch existiert; der Artikel zur Fokusverwaltung behandelt den Rest.