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-Fenstern auf einer Webseite: ein Pop-up, das den Nutzer auf sich selbst unterbricht. Es gibt Einige gültige Anwendungsfälle für das Öffnen eines Dialogfelds, aber gute Überlegung sollten, bevor Sie dies tun. Modale Dialogfelder zwingen Nutzer dazu, sich auf bestimmte Inhalte zu konzentrieren und sie zumindest vorübergehend zu ignorieren. für den Rest der Seite.
Dialoge können entweder modal (nur der Inhalt des Dialogfelds kann mit ihm interagiert werden) oder nicht modal (es ist weiterhin möglich, zu interagieren). mit Inhalten außerhalb des Dialogfelds. Modale Dialogfelder werden über dem restlichen Seiteninhalt angezeigt. Der Rest der Seite inert und standardmäßig von einem halbtransparenten Hintergrund verdeckt wird.
Das semantische HTML-Element <dialog>
zum Erstellen eines Dialogfelds
Dazu gehören Semantik, Tastaturinteraktionen und alle Eigenschaften und Methoden der HTMLDialogElement
-Oberflä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()
.
Für HTMLDialogElement
gibt es 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 */
Weil diese <dialog>
über 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
Bewegen Sie den Mauszeiger außerhalb des Dialogfelds auf die Benutzeroberfläche. Sie sehen, dass sich alle Elemente so verhalten, als würden pointer-events: none;
festgelegt wurde; selbst die Schaltfläche zum Öffnen des Dialogfelds
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 es 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 programmatisch nicht auf Nutzeraktion basierendes Dialogfeld öffnen, ü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 inert
-Attribut, mit dem ein Element und alle Nachfolgerelemente deaktiviert werden können, mit Ausnahme von aktiven Elementen.
Dialogfeld. 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 ::backdrop
gestaltet werden
ein Pseudoelement. 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.
Obwohl eine Schaltfläche zum Schließen des Dialogfelds gemäß der Spezifikation nicht offiziell erforderlich ist, betrachten Sie sie als erforderlich. 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. JavaScript ist überhaupt nicht erforderlich. <dialog>
schließen
ohne JavaScript, schließen Sie ein Formular mit einer Dialogmethode ein, indem Sie entweder method="dialog"
für <form>
oder formmethod="dialog"
festlegen.
auf der Schaltfläche.
Wenn ein Nutzer etwas mit der Methode dialog
einreicht, wird der Status der vom Nutzer eingegebenen Daten beibehalten. Es gibt zwar ein Ereignis zum Einreichen,
Das Formular durchläuft die Einschränkungsvalidierung (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, für die das Attribut autofocus
in einem <dialog>
festgelegt ist, werden nicht empfangen.
Fokus auf den Seitenaufbau (es sei denn, die Seite wird mit sichtbarem Dialogfeld geladen). Sie werden jedoch hervorgehoben, wenn das Dialogfeld geöffnet wird.
Standardmäßig wird beim Öffnen eines Dialogfelds das erste fokussierbare Element innerhalb des Dialogfelds hervorgehoben, es sei denn, ein anderes
im Dialogfeld ist das Attribut autofocus
festgelegt. Mit dem Attribut autofocus
für die Schließen-Schaltfläche
wird diese beim Öffnen des Dialogfelds hervorgehoben. Die Einbindung von autofocus
in eine <dialog>
sollte jedoch mit Bedacht erfolgen. Alle Elemente in der Sequenz, die vor dem automatisch fokussierten Element liegen, werden übersprungen.
Dieses Attribut wird in der Fokus-Lektion näher erläutert.
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 wird, wird das boolesche Attribut open
vorhanden ist, was bedeutet, dass der Dialog aktiv ist und mit dem interagiert werden kann. Wenn ein Dialogfeld durch Hinzufügen des Attributs open
geöffnet wird
als über .show()
oder .showModal()
, wird das Dialogfeld ohne modale Fenster angezeigt. 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 Seitenaufbau 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 Schließen-Schaltfläche (und möglicherweise andere Inhalte) können
fokussiert und interaktiv sind. Das <dialog>
-Element ist nicht interaktiv und nicht im Fokus. Fügen Sie die Property tabindex
nicht dem Dialogfeld selbst hinzu.
ARIA-Rollen
Die implizite Rolle ist dialog
. Wenn das Dialogfeld
ein Bestätigungsfenster für eine wichtige Nachricht ist, die eine Bestätigung oder eine andere Nutzerantwort erfordert, legen Sie role="alertdialog"
fest.
Das Dialogfeld sollte außerdem einen barrierefreien Namen haben. Wenn der barrierefreie Name aus einem sichtbaren Text bestehen kann, fügen Sie aria-labelledby="idOfLabelingText"
hinzu.
CSS-Standardeinstellungen
Beachte, dass Browser einen Standardstil für dialog
bereitstellen. Firefox, Chrome und Edge: color: CanvasText;
background-color: Canvas;
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, 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
background
.::backdrop