Das Dialogfeld-Element ist ein nützliches Element, um jede Art von Dialogfeld in HTML darzustellen. Hier erfahren Sie, wie es funktioniert.
Ein modales Dialogfeld ist eine spezielle Art von Pop-up-Fenster auf einer Webseite: Ein Pop-up, das die Nutzer daran hindert, sich auf andere Dinge zu konzentrieren. Es gibt einige Gültige Anwendungsfälle für das Auftauchen eines Dialogfelds, aber Sie sollten sich gut überlegen, ob Sie das tun möchten. Modale Dialogfelder zwingen Nutzer, sich auf bestimmte Inhalte zu konzentrieren und zumindest vorübergehend den Rest der Seite zu ignorieren.
Dialoge können modal (nur mit den Inhalten im Dialogfeld interagieren) oder nicht modal (es ist weiterhin möglich, mit Inhalten außerhalb des Dialogfelds zu interagieren) sein. Modale Dialogfelder werden über dem restlichen Seiteninhalt angezeigt. Der Rest der Seite ist inaktiv und standardmäßig durch einen halbtransparenten Hintergrund verdeckt.
Das semantische HTML-Element <dialog> zum Erstellen eines Dialogfelds bietet Semantik, Tastaturinteraktionen und alle Eigenschaften und Methoden der HTMLDialogElement-Benutzeroberfläche.
Modale Dialogfelder
Hier ein Beispiel für ein modales <dialog>. Öffnen Sie das Dialogfeld mit der Schaltfläche „Modales Dialogfeld öffnen“. Es gibt drei Möglichkeiten, das Dialogfeld zu schließen: über die Escape-Taste, über das Senden eines Formulars mit einer Schaltfläche, für die formmethod="dialog" festgelegt ist (oder für die im Formular selbst method="dialog" festgelegt ist) oder über die Methode HTMLDialogElement.close().
Die HTMLDialogElement hat drei Hauptmethoden sowie alle Methoden, die von HTMLElement übernommen wurden.
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, handelt es sich um ein modales Dialogfeld. Wenn ein modales Dialogfeld geöffnet wird, werden alle anderen Elemente deaktiviert und ausgeblendet. 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, mit der das Dialogfeld geöffnet wird, reagiert nicht auf Interaktionen.
Wenn das Dialogfeld geöffnet wird, wird der Fokus darauf gelegt. Der Fokus wird auf das erste Element in der sequenziellen Tastaturnavigationsreihenfolge in diesem Dialogfeld gesetzt.
Wenn Sie wiederholt die Taste tab drücken, können Sie feststellen, dass nur der Inhalt im Dialogfeld den Fokus erhalten 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, modal oder nicht, wird der Fokus auf das Element zurückgesetzt, mit dem das Dialogfeld geöffnet wurde. Wenn Sie ein Dialogfeld programmatisch öffnen, das nicht auf einer Nutzeraktion basiert, sollten Sie es noch einmal überdenken. Achten Sie darauf, dass der Fokus wieder dorthin zurückkehrt, wo er vor dem Öffnen des Dialogfelds war, insbesondere wenn der Nutzer das Dialogfeld schließt, ohne mit ihm zu interagieren.
Es gibt ein globales Attribut inert, mit dem ein Element und alle seine untergeordneten Elemente deaktiviert werden können, mit Ausnahme aller aktiven Dialogfelder. Wenn ein modales Dialogfeld mit showModal() geöffnet wird, ist die Inaktivität oder Deaktivierung automatisch aktiviert. Das Attribut wird nicht explizit festgelegt.
Der Hintergrund, der alles außer dem Dialogfeld verdeckt, kann mit dem Pseudo-Element ::backdrop gestaltet werden. Der Hintergrund wird nur angezeigt, wenn ein <dialog> mit der Methode .showModal() angezeigt wird. Dieses Pseudo-Element passt zu allen Hintergründen, einschließlich desjenigen, der bei Verwendung der Fullscreen API angezeigt wird, z. B. wenn ein Video im Vollbildmodus wiedergegeben wird, das nicht dasselbe Seitenverhältnis wie der Bildschirm oder Monitor hat.
Nicht modale Dialogfelder
Mit dem HTMLDialogElement.show() wird ebenfalls ein Dialogfeld geöffnet, ohne dass ein Hintergrund hinzugefügt oder etwas inaktiv gemacht wird.
Nicht modale Dialogfelder werden nicht durch die Escape-Taste geschlossen. Daher ist es umso wichtiger, dass Sie eine Methode zum Schließen des nicht modalen Dialogfelds angeben. Wenn sich der Schließer außerhalb des Dialogfelds befindet, wird der Fokus auf das Element gelegt, mit dem das Dialogfeld geöffnet wurde. Das ist nicht unbedingt nutzerfreundlich.
Eine Schaltfläche zum Schließen des Dialogfelds ist zwar offiziell nicht in der Spezifikation erforderlich, sollte aber vorhanden sein. Mit der Esc-Taste wird ein modales Dialogfeld geschlossen, aber kein nicht-modales Dialogfeld. Eine sichtbare Schaltfläche, die den Fokus erhalten kann, verbessert die Barrierefreiheit und 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 du das <dialog> ohne JavaScript schließen möchtest, füge ein Formular mit einer Dialogmethode ein. Lege dazu entweder method="dialog" für die <form> oder formmethod="dialog" für die Schaltfläche fest.
Wenn ein Nutzer über die dialog-Methode einreicht, wird der Status der von ihm eingegebenen Daten beibehalten. Es gibt zwar ein Sende-Ereignis, das Formular wird aber einer Einschränkungsüberprüfung unterzogen (es sei denn, novalidate ist festgelegt). Die Nutzerdaten werden weder gelöscht noch gesendet.
Eine Schaltfläche zum Schließen ohne JavaScript kann so geschrieben werden:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
In diesem Beispiel ist das Attribut autofocus für das Schließen-Symbol <button> festgelegt. Elemente mit dem autofocus-Attribut, das in einem <dialog> festgelegt ist, erhalten beim Laden der Seite keinen Fokus, es sei denn, die Seite wird geladen, während das Dialogfeld sichtbar ist. Sie erhalten jedoch den Fokus, wenn das Dialogfeld geöffnet wird.
Wenn ein Dialogfeld geöffnet wird, erhält standardmäßig das erste fokussierbare Element im Dialogfeld den Fokus, es sei denn, für ein anderes Element im Dialogfeld ist das Attribut autofocus festgelegt. Wenn Sie das Attribut autofocus auf die Schaltfläche zum Schließen festlegen, erhält sie den Fokus, wenn das Dialogfeld geöffnet wird. Die Verwendung von autofocus in einer <dialog> sollte jedoch mit Bedacht erfolgen. Alle Elemente in der Sequenz, die vor dem automatisch fokussierten Element liegen, werden übersprungen.
In der Fokuslektion gehen wir näher auf dieses Attribut ein.
Die HTMLDialogElement-Schnittstelle enthält das Attribut returnValue. Wenn Sie ein Formular mit einer method="dialog" einreichen, wird die returnValue auf die name der Schaltfläche „Senden“ gesetzt, über die das Formular gesendet wurde. Wenn wir <button type="submit" name="toasty">close</button> geschrieben hätten, wäre returnValue toasty.
Wenn ein Dialogfeld geöffnet ist, 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, ist es nicht modal. Die Property HTMLDialogElement.open gibt true oder false zurück, je nachdem, ob der Dialog für Interaktionen verfügbar ist – unabhängig davon, ob er modal ist oder nicht.
JavaScript ist die bevorzugte Methode zum Öffnen eines Dialogfelds. Wenn Sie das Attribut open beim Laden der Seite einfügen und dann mit .close() entfernen, ist das Dialogfeld auch dann verfügbar, wenn JavaScript nicht aktiviert ist.
Weitere Details
tabindex nicht verwenden
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 erhält keinen Fokus. Fügen Sie die Property tabindex nicht dem Dialogfeld selbst hinzu.
ARIA-Rollen
Die implizite Rolle ist dialog. Wenn es sich bei dem Dialogfeld um ein Bestätigungsfenster handelt, das eine wichtige Nachricht enthält, die eine Bestätigung oder andere Nutzerantwort erfordert, legen Sie role="alertdialog" fest.
Der Dialog sollte auch einen für Screenreader zugänglichen Namen haben. Wenn der barrierefreie Name aus einem sichtbaren Text bestehen kann, fügen Sie aria-labelledby="idOfLabelingText" hinzu.
CSS-Standards
Browser bieten ein Standard-Styling für dialog. Firefox, Chrome und Edge legen in ihren User-Agent-Stylesheets color: CanvasText; background-color: Canvas; fest und Safari legt color: black; background-color: white; fest. Die color wird von dialog und nicht von body oder :root übernommen, was unerwartet sein kann. Die Eigenschaft background-color wird nicht übernommen.
Wissen testen
Testen Sie Ihr Wissen über das Dialogfeld-Element.
Wie gestalten Sie den Bereich hinter dem Dialogfeld?
::background::backdropbackground.