Ein modales Dialogfeld ist ein spezielles Pop-up-Fenster, das den Nutzer auf einer Webseite unterbricht. Es gibt zwar einige gültige Anwendungsfälle für das Einblenden eines Dialogfelds, Sie sollten sich jedoch gut überlegen, ob Sie ein Dialogfeld hinzufügen möchten. Modale Dialogfelder zwingen Nutzer, sich auf bestimmte Inhalte zu konzentrieren und den Rest der Seite vorübergehend zu ignorieren.
Dialogfelder können Folgendes sein:
- Modal: Nutzer können nur mit Inhalten im Dialogfeld interagieren. Modale Dialogfelder werden über dem Seiteninhalt angezeigt. Die Seite ist auf inert gesetzt und wird standardmäßig durch einen halbtransparenten Hintergrund verdeckt.
- Nicht modal: Nutzer können mit Inhalten außerhalb des Dialogfelds interagieren.
Das semantische HTML-Element <dialog> zum Erstellen eines Dialogfelds bietet Semantik, Tastaturinteraktionen sowie alle Attribute und Methoden der Schnittstelle HTMLDialogElement.
Modale Dialogfelder
Sehen Sie sich ein Beispiel für ein modales <dialog> an. Klicken Sie auf Modales Dialogfeld öffnen.
Nach dem Öffnen gibt es drei Möglichkeiten, das Dialogfeld zu schließen: die Esc-Taste, das Senden eines Formulars mit einer Schaltfläche, für die formmethod="dialog" festgelegt ist (oder wenn für das Formular selbst method="dialog" festgelegt ist), und die Methode HTMLDialogElement.close().
HTMLDialogElement hat drei Hauptmethoden sowie alle von HTMLElement übernommenen Methoden.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Da dieses <dialog> mit der Methode HTMLDialogElement.showModal() geöffnet wurde, handelt es sich um ein modales Dialogfeld. Wenn ein modales Dialogfeld geöffnet wird, wird alles andere als das Dialogfeld selbst deaktiviert und verdeckt. Wenn Sie den Mauszeiger außerhalb des Dialogfelds auf die Benutzeroberfläche bewegen, verhalten sich alle Elemente so, als wäre pointer-events: none; festgelegt. Sogar die Schaltfläche, die das Dialogfeld öffnet, reagiert nicht auf Interaktionen.
Wenn das Dialogfeld geöffnet wird, wird der Fokus auf das Dialogfeld gelegt. Der Fokus wird auf das erste Element in der sequenziellen Tastaturnavigationsreihenfolge innerhalb dieses Dialogfelds gesetzt.
Wenn Sie wiederholt die tab-Taste drücken, kann nur der Inhalt im Dialogfeld den Fokus erhalten, während das modale Dialogfeld geöffnet ist. Alles außerhalb des Modals bleibt inaktiv.
Wenn ein Dialogfeld geschlossen wird, egal ob modal oder nicht, wird der Fokus wieder auf das Element gelegt, über das das Dialogfeld geöffnet wurde. Vermeiden Sie es, ein Dialogfeld programmatisch ohne Nutzeraktion zu öffnen. Wenn dies erforderlich ist, muss der Fokus wieder dorthin zurückkehren, wo er sich vor dem Öffnen des Dialogfelds befand. Das gilt insbesondere, wenn der Nutzer das Dialogfeld schließt, ohne damit zu interagieren.
Es gibt ein globales inert-Attribut, mit dem ein Element und alle seine untergeordneten Elemente deaktiviert werden können, mit Ausnahme von aktiven Dialogen. Wenn ein modales Dialogfeld mit showModal() geöffnet wird, erfolgt die Inaktivierung oder Deaktivierung standardmäßig. Das Attribut ist nicht explizit festgelegt.
Der Hintergrund, der alles außer dem Dialogfeld verdeckt, kann mit dem Pseudoelement ::backdrop gestaltet werden. Der Hintergrund wird nur angezeigt, wenn ein <dialog> mit der Methode .showModal() angezeigt wird. Dieses Pseudoelement entspricht allen Hintergründen, einschließlich des Hintergrunds, der bei Verwendung der FullScreen API angezeigt wird, z. B. wenn ein Video im Vollbildmodus angesehen wird, das nicht dasselbe Seitenverhältnis wie der Bildschirm oder Monitor hat.
Nicht modale Dialogfelder
Das HTMLDialogElement.show()-Element öffnet ebenfalls ein Dialogfeld, aber ohne einen Hintergrund hinzuzufügen oder etwas inaktiv zu machen. Mit der Esc-Taste werden nur modale Dialogfelder geschlossen, keine nicht modalen Dialogfelder. Aus diesem Grund ist es umso wichtiger, eine Methode zum Schließen des nicht modalen Dialogfelds einzubinden. Wenn sich die Option zum Schließen außerhalb des Dialogfelds befindet, wird der Fokus wieder auf das Element gelegt, über das das Dialogfeld geöffnet wurde. Das ist keine ideale Nutzererfahrung.
Eine Schaltfläche zum Schließen des Dialogfelds ist zwar nicht offiziell in der Spezifikation vorgeschrieben, sollte aber als erforderlich angesehen werden. Eine sichtbare Schaltfläche, die fokussiert werden kann, verbessert die Barrierefreiheit und die Nutzerfreundlichkeit.
Dialogfeld schließen
Sie benötigen die Methode HTMLDialogElement.close() nicht, um ein Dialogfeld zu schließen. Sie benötigen überhaupt kein JavaScript. Wenn Sie das <dialog> ohne JavaScript schließen möchten, fügen Sie ein Formular mit einer Dialogmethode ein. Legen Sie dazu entweder method="dialog" für das <form> oder formmethod="dialog" für den Button fest.
Wenn ein Nutzer die Daten mit der Methode dialog sendet, bleibt der Status der vom Nutzer eingegebenen Daten erhalten. Während eines Submit-Ereignisses wird das Formular einer Einschränkungsvalidierung unterzogen (es sei denn, novalidate ist festgelegt). Die Nutzerdaten werden nicht gelöscht oder gesendet. So erstellen Sie eine Schließen-Schaltfläche ohne JavaScript:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Vielleicht ist Ihnen in diesem Beispiel das Attribut autofocus aufgefallen, das für das schließende <button> festgelegt ist. Elemente mit dem Attribut autofocus, die in einem <dialog> festgelegt sind, erhalten beim Seitenaufbau nur dann den Fokus, wenn die Seite bereits mit dem sichtbaren Dialogfeld geladen wurde. Wenn die Seite nicht geladen wurde, erhalten diese Elemente den Fokus, wenn das Dialogfeld geöffnet wird.
Wenn ein Dialogfeld geöffnet wird, wird das erste fokussierbare Element im Dialogfeld fokussiert, es sei denn, für ein anderes Element ist das Attribut autofocus festgelegt. Wenn Sie das Attribut autofocus für den Schließen-Button festlegen, wird er beim Öffnen des Dialogfelds fokussiert. Das Einfügen von autofocus in ein <dialog> sollte jedoch nur nach sorgfältiger Überlegung erfolgen. Alle Elemente in der Sequenz, die vor dem Element mit Autofokus stehen, werden übersprungen.
Dieses Attribut wird im Fokusmodul näher erläutert.
Die Schnittstelle HTMLDialogElement enthält die Property returnValue. Wenn Sie ein Formular mit einem method="dialog" senden, wird der returnValue auf den name der Schaltfläche „Senden“ gesetzt, die zum Senden des Formulars verwendet wurde. Wenn wir <button type="submit" name="toasty">close</button> schreiben würden, wäre returnValue gleich toasty.
Wenn ein Dialogfeld geöffnet wird, ist das boolesche Attribut open vorhanden. Das bedeutet, dass das Dialogfeld aktiv ist und mit ihm interagiert werden kann.
Wenn ein Dialogfeld durch Hinzufügen des Attributs open und nicht mit .show() oder .showModal() geöffnet wird, ist das Dialogfeld nicht modal. Das Attribut HTMLDialogElement.open gibt true oder false zurück, je nachdem, ob der Dialog für die Interaktion verfügbar ist, nicht ob er modal ist oder nicht.
JavaScript ist die bevorzugte Methode zum Öffnen eines Dialogfelds. Wenn Sie das Attribut open beim Seitenaufbau einfügen und dann mit .close() entfernen, ist das Dialogfeld auch dann verfügbar, wenn JavaScript nicht verfügbar ist.
Weitere Informationen
Verwenden Sie nicht tabindex.
Das Element, das zum Öffnen des Dialogfelds aktiviert wird, und die darin enthaltene Schaltfläche zum Schließen (und möglicherweise andere Inhalte) können den Fokus erhalten und sind interaktiv. Das <dialog>-Element ist nicht interaktiv und kann nicht fokussiert werden. Fügen Sie dem Dialogfeld selbst nicht das Attribut tabindex hinzu.
ARIA-Rollen
Die implizite Rolle ist dialog.
Wenn das Dialogfeld ein Bestätigungsfenster ist, das eine Nachricht enthält, die eine Antwort oder Bestätigung des Nutzers erfordert, legen Sie role="alertdialog" fest.
Fügen Sie einen barrierefreien Namen für das Dialogfeld hinzu. Wenn der sichtbare Text den barrierefreien Namen liefern kann, fügen Sie aria-labelledby="idOfLabelingText" hinzu.
CSS-Standardeinstellungen
Browser bieten Standardstile für dialog. Firefox, Chrome und Edge legen color: CanvasText; und background-color: Canvas; fest. Safari legt color: black; background-color: white; in seinen User-Agent-Stylesheets fest.
Der color wird von dialog und nicht von body oder :root übernommen, was möglicherweise unerwartet ist. Das Attribut background-color wird nicht übernommen.
Dein Wissen wird getestet
Testen Sie Ihr Wissen zum Dialogelement.
Wie gestalten Sie den Bereich hinter dem Dialogfeld?
::background.::backdrop.background.