HTML-Tag <dialog> als Modal-Ersatz

Das <dialog>-Element stellt ein modales oder nicht-modales Dialogfenster dar (z. B. Bestätigungsdialog, Formular, Hinweis). Es bietet native Methoden (show(), showModal(), close()), ein ::backdrop-Pseudo-Element und vereinfacht zugängliche Modals, wenn richtig eingesetzt. MDN Web Docs

1. Definition & Zweck

• Repräsentiert ein „temporäres Teil der Anwendung“ — kleines Fenster zur Interaktion (Dialogbox, Inspector, Alert).
• Kann modal sein (User-Interaktion mit Rest der Seite wird unterbrochen / die Seite wird inert) oder nicht-modal (Rest bleibt interaktiv). html.spec.whatwg.org

2. Grundsyntax & Attribute

<dialog id="dlg">Inhalt des Dialogs</dialog>

<dialog id="dlg">Inhalt des Dialogs</dialog>

3. Wichtige Methoden & Events

4. Beispiel: Nicht-modal vs. modal

Nicht-modal (show):

<button id="open1">Open</button>
<dialog id="d1">Nicht-modaler Dialog <button onclick="d1.close()">Close</button></dialog>

<script>
const d1 = document.getElementById('d1');
document.getElementById('open1').addEventListener('click', () => d1.show());
</script>

Modal (showModal):

<button id="open2">Open modal</button>
<dialog id="d2">Modaler Dialog <button onclick="d2.close('ok')">OK</button></dialog>

<script>
const d2 = document.getElementById('d2');
document.getElementById('open2').onclick = () => d2.showModal();
d2.addEventListener('close', () => console.log('returnValue:', d2.returnValue));
</script>

(Siehe MDN Beispiele und Erklärungen). MDN Web Docs

5. Styling & ::backdrop

• ::backdrop ist das Pseudo-Element hinter einem modal gezeigten Dialog (z. B. halbtransparenter Hintergrund). Beispiel:

dialog::backdrop { background: rgba(0,0,0,0.5); }
dialog { border: none; border-radius: 8px; padding: 1rem; }

• Dialogs sind normale Elemente im DOM; CSS-Eigenschaften (Größe, Position, Animation) gelten wie für andere Elemente, aber Positionierung im Top-Layer kann Besonderheiten haben. MDN Web Docs+1

6. Accessibility (WAI / Best Practices)

Wichtigste Punkte zum barrierefreien Einsatz:

• Fokusmanagement: Beim Öffnen sollte der Fokus sinnvoll gesetzt werden (z. B. erstes interaktives Element). Beim Schließen Fokus zurückgeben zum Auslöser. (WAI/APG-Pattern Beispiele). W3C
• ARIA: Das native <dialog> liefert bereits verhaltensrelevante Signale; dennoch kann es sinnvoll sein role="dialog" oder aria-modal="true" (bei polyfills) zu ergänzen, sowie aria-labelledby/aria-describedby. a11ysupport.io
• Inert / page inertness: showModal() macht übrige Seite inert im Sinne der Spezifikation; bei Polyfills muss inert-Verhalten ggf. separat sichergestellt werden. MDN Web Docs

7. Browser-Support & Polyfills

dialog ist heute breit unterstützt, aber Unterschiede/Edgecases existieren — prüfe Support vor dem Produktiveinsatz (CanIUse / Tests). Wenn ältere Browser unterstützt werden sollen, nutze einen Polyfill (z. B. dialog-polyfill) und teste showModal()/::backdrop-Verhalten. Can I Use

8. Quick-Reference Tabelle

(Quellen: MDN, WHATWG HTML-Standard, CanIUse, WAI/APG). MDN Web Docs

Weiterführende Links:

• MDN: <dialog> element (Referenz & Beispiele). MDN Web Docs
• WHATWG HTML Spec: dialog element (Detaillierte Spezifikation, Events, Verhalten). html.spec.whatwg.org
• CanIUse / Kompatibilität: dialog (Support-Tabelle). Can I Use
• WAI/APG: Modal Dialog Pattern (zugängliche Implementierungsempfehlungen). W3C