Ein modales Dialogfeld ist eine spezielle Art von Pop-up-Fenstern auf einer Webseite: ein Pop-up-Fenster, das Nutzende unterbricht, sich auf sich selbst zu konzentrieren. Es gibt einige zulässige Anwendungsfälle für Pop-up-Fenster, aber vorher sollten Sie sorgfältig abwägen. Modale Dialogfelder zwingen Nutzer dazu, sich auf bestimmte Inhalte zu konzentrieren, und ignorieren zumindest vorübergehend den Rest der Seite.
Dialoge können entweder modal sein (nur mit dem Inhalt des Dialogfelds kann interagiert werden) oder nicht modal (Sie können weiterhin mit Inhalten außerhalb des Dialogfelds interagieren). Modale Dialogfelder werden über dem Rest des Seiteninhalts angezeigt. Der Rest der Seite ist inert und wird standardmäßig von einem halbtransparenten Hintergrund verdeckt.
Das semantische HTML-Element <dialog> zum Erstellen eines Dialogfelds enthält Semantik, Tastaturinteraktionen und alle Eigenschaften und Methoden der HTMLDialogElement-Schnittstelle.
Modale Dialogfelder
Hier ist ein Beispiel für ein modales <dialog>-Element. Öffnen Sie das Dialogfeld mit der Schaltfläche „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, in der formmethod="dialog" festgelegt ist (oder wenn im Formular method="dialog" festgelegt ist) und die Methode HTMLDialogElement.close().
Für HTMLDialogElement sind neben allen von HTMLElement übernommenen Methoden drei Hauptmethoden vorhanden.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Da dieses <dialog> über die Methode HTMLDialogElement.showModal() geöffnet wurde, ist es ein modales Dialogfeld. Wenn Sie ein modales Dialogfeld öffnen, wird alles außer dem eigentlichen Dialogfeld deaktiviert und verdeckt. Wenn Sie den Mauszeiger außerhalb des Dialogfelds auf die Benutzeroberfläche bewegen, sehen Sie, dass sich alle Elemente so verhalten, als wäre pointer-events: none; festgelegt. Auch die Schaltfläche zum Öffnen des Dialogfelds reagiert nicht auf Interaktionen.
Wenn das Dialogfeld geöffnet wird, wird der Fokus in das Dialogfeld verschoben. Der Fokus wird auf dem ersten Element der sequenziellen Tastaturnavigationsreihenfolge in diesem Dialogfeld festgelegt.
Wenn Sie wiederholt die Taste tab drücken, werden Sie feststellen, dass nur der Inhalt des Dialogfelds hervorgehoben werden kann, während das modale Dialogfeld geöffnet ist. Alles außerhalb des modalen Dialogfelds ist inaktiv, solange das Dialogfeld geöffnet ist.
Wenn ein Dialogfeld geschlossen wird oder nicht, wird der Fokus wieder auf das Element gesetzt, das das Dialogfeld geöffnet hat. Wenn Sie programmatisch ein Dialogfeld öffnen, das nicht auf einer Nutzeraktion basiert, überdenken Sie das noch einmal. Achten Sie bei Bedarf darauf, dass der Fokus wieder an der Stelle liegt, wo er sich vor dem Öffnen des Dialogfelds befand, insbesondere wenn der Nutzer das Dialogfeld schließt, ohne damit zu interagieren.
Es gibt ein globales inert-Attribut, mit dem ein Element und alle Nachfolgerelemente mit Ausnahme aktiver Dialogfelder deaktiviert werden können. Wenn ein modales Dialogfeld mit showModal() geöffnet wird, ist die Inaktivität oder Deaktivierung kostenlos. Das Attribut wird 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 stimmt mit allen Bilderrahmen überein, einschließlich dem, der angezeigt wird, wenn die FullScreen API verwendet wird, z. B. wenn ein Video im Vollbildmodus angesehen wird, das nicht dasselbe Seitenverhältnis wie der Bildschirm oder Monitor hat.
Nicht modale Dialogfelder
HTMLDialogElement.show() öffnet ähnlich ein Dialogfeld, ohne dass ein Hintergrund hinzugefügt wird oder etwas inaktiv wird.
Nicht modale Dialogfelder werden nicht mit der Esc-Taste geschlossen. Aus diesem Grund ist es umso wichtiger, eine Methode zum Schließen des nicht modalen Dialogfelds einzubinden. Wenn sich dabei der Abstand außerhalb des Dialogfelds befindet, erkennen Sie, dass der Fokus auf das Element gelegt wird, das das Dialogfeld geöffnet hat, was möglicherweise nicht die beste User Experience ist.
Obwohl eine Schaltfläche zum Schließen des Dialogfelds gemäß der Spezifikation offiziell nicht erforderlich ist, wird sie als erforderlich angesehen. Mit der Esc-Taste wird ein modales Dialogfeld geschlossen, aber kein nicht modales Dialogfeld. Eine sichtbare Schaltfläche, die hervorgehoben werden kann, verbessert die Barrierefreiheit und User Experience.
Dialogfeld schließen
Die Methode HTMLDialogElement.close() wird nicht benötigt, um ein Dialogfeld zu schließen. JavaScript ist überhaupt nicht erforderlich. Wenn Sie <dialog> ohne JavaScript schließen möchten, fügen Sie ein Formular mit einer Dialogmethode hinzu. Legen Sie dazu entweder method="dialog" für <form> oder formmethod="dialog" auf der Schaltfläche fest.
Sendet ein Nutzer Daten über die Methode dialog, wird der Status der vom Nutzer eingegebenen Daten beibehalten. Während ein Sendeereignis vorhanden ist – das Formular durchläuft die Einschränkungsvalidierung (sofern novalidate nicht festgelegt ist) werden die Nutzerdaten weder gelöscht noch gesendet.
Eine Schließen-Schaltfläche ohne JavaScript kann so geschrieben werden:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Vielleicht ist Ihnen schon aufgefallen, dass das Attribut autofocus in diesem Beispiel im schließenden <button> festgelegt wurde. Elemente, für die das Attribut autofocus innerhalb eines <dialog> festgelegt ist, erhalten keinen Fokus auf den Seitenaufbau, es sei denn, beim Laden der Seite ist das Dialogfeld sichtbar. Sie sind jedoch fokussiert, wenn das Dialogfeld geöffnet wird.
Wenn ein Dialogfeld geöffnet wird, ist standardmäßig das erste fokussierbare Element im Dialogfeld hervorgehoben, sofern nicht für ein anderes Element im Dialogfeld das Attribut autofocus festgelegt ist. Wenn Sie das Attribut autofocus für die Schließen-Schaltfläche festlegen, wird sie beim Öffnen des Dialogfelds hervorgehoben. Das Einbinden von autofocus in einem <dialog> sollte jedoch nur mit großer Überlegung erfolgen. Alle Elemente in der Sequenz, die vor dem automatisch fokussierten Element kommen, werden übersprungen.
Weitere Informationen zu diesem Attribut erhalten Sie in dieser Lektion.
Die HTMLDialogElement-Oberfläche enthält ein returnValue-Attribut. Wenn Sie ein Formular mit einer method="dialog" senden, wird returnValue auf den name der Schaltfläche „Senden“ gesetzt, die zum Senden des Formulars verwendet wird. Hätten wir <button type="submit" name="toasty">close</button> geschrieben, wäre returnValue 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 statt über .show() oder .showModal() geöffnet wird, enthält es keine modale Seite. Das Attribut HTMLDialogElement.open gibt true oder false zurück, je nachdem, ob das Dialogfeld für die Interaktion verfügbar ist, nicht, ob es modal ist oder nicht.
Obwohl JavaScript die bevorzugte Methode zum Öffnen eines Dialogfelds ist, einschließlich des Attributs open beim Seitenaufbau und anschließendes Entfernen mit .close(), kann dafür gesorgt werden, dass das Dialogfeld auch ohne JavaScript verfügbar ist.
Weitere Informationen
tabindex nicht verwenden
Das Element, das zum Öffnen des Dialogfelds aktiviert wird, und die darin enthaltene Schließen-Schaltfläche (und möglicherweise andere Inhalte) können fokussiert werden und sind interaktiv. Das <dialog>-Element ist nicht interaktiv und wird nicht fokussiert. Fügen Sie das Attribut tabindex nicht in das Dialogfeld selbst ein.
ARIA-Rollen
Die implizite Rolle ist dialog. Wenn das Dialogfeld ein Bestätigungsfenster mit einer wichtigen Nachricht ist, die eine Bestätigung oder eine andere Nutzerantwort erfordert, legen Sie role="alertdialog" fest.
Das Dialogfeld sollte auch einen barrierefreien Namen haben. Wenn sichtbarer Text für den barrierefreien Namen geeignet ist, fügen Sie aria-labelledby="idOfLabelingText" hinzu.
Standardeinstellungen für Preisvergleichsportale
Hinweis: Browser stellen den Standardstil für dialog bereit. In Firefox, Chrome und Edge wird color: CanvasText; background-color: Canvas; festgelegt und Safari legt color: black; background-color: white; in ihren User-Agent-Stylesheets fest. Die color wird von dialog und nicht von body oder :root übernommen. Dies kann unerwartet sein. Die Eigenschaft background-color wird nicht übernommen.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über das Dialogelement.
Wie gestalten Sie den Bereich hinter dem Dialogfeld?
::background.::backdrop.background.