`<dialog>`: Das Dialog-Element

<dialog>: Das Dialog-Element

• Integriert: Das <dialog>-Element stellt interaktive Elemente wie modale oder nicht modale Dialoge, Warnmeldungen, Inspektoren und Unterfenster dar. Es ist seit März 2022 in den meisten Browsern verfügbar.

Attribute

• open: Gibt an, dass der Dialog aktiv und interaktionsfähig ist. Wenn das Attribut open nicht gesetzt ist, ist er für Benutzer nicht sichtbar. Es wird empfohlen, die Methoden .show() oder .showModal() zu verwenden.

Nutzungshinweise

• Das HTML-Element <form> kann einen Dialog mit dem Attribut method="dialog" schließen.
• Mit dem CSS-Pseudoelement ::backdrop kann der Hintergrund eines modalen Dialogs gestaltet werden.
• Das Attribut autofocus sollte dem Element hinzugefügt werden, mit dem unmittelbar interagiert werden soll, wenn der Dialog geöffnet wird.
• Achten Sie darauf, dem <dialog>-Element kein tabindex-Attribut hinzuzufügen.

Barrierefreiheit

• Bei der Implementierung eines Dialogs ist es wichtig, den Benutzerfokus angemessen zu setzen.
• Wenn ein Dialog mit der Methode showModal() geöffnet wird, wird der Fokus auf das erste fokussierbare Element gesetzt.
• Die sicherste Methode ist, eine explizite Schaltfläche einzubauen, damit alle Benutzer den Dialog schließen können.

Beispiele

Reiner HTML-Dialog

• Beispiel für das Erstellen eines nicht modalen Dialogs nur mit HTML. Aufgrund des Attributs open ist der Dialog beim Laden der Seite geöffnet.

Einen modalen Dialog erstellen

• Beispiel für das Öffnen eines modalen Dialogs mit der Methode .showModal(). Er kann mit der Esc-Taste oder mit der Schaltfläche "Close" im Dialog geschlossen werden.

Den Rückgabewert des Dialogs verarbeiten

• Beispiel für die Verwendung von returnValue des <dialog>-Elements. Ein modaler Dialog kann mit einem Formular geschlossen werden.

Einen Dialog mit erforderlichen Formulareingaben schließen

• Wenn das Formular innerhalb des Dialogs erforderliche Eingaben enthält, kann es mit dem Attribut formnovalidate geschlossen werden.

Dialog-Animation

• Der Dialog kann animiert werden, indem die Eigenschaft display des <dialog>-Elements animiert wird.

Technische Zusammenfassung

• Inhaltskategorien: Flow Content, Sectioning Root
• Erlaubter Inhalt: Flow Content
• Implizite ARIA-Rolle: dialog
• DOM-Schnittstelle: HTMLDialogElement

Spezifikationen

• HTML-Standard # the-dialog-element

Browser-Kompatibilität

• Das <dialog>-Element und das Attribut open werden von den meisten wichtigen Browsern vollständig unterstützt.

Siehe auch

• Schnittstelle HTMLDialogElement
• Die Ereignisse close und cancel von HTMLDialogElement
• Das Attribut open von HTMLDialogElement
• Das globale HTML-Attribut inert
• CSS-Pseudoelement ::backdrop