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 ist ein Beispiel für ein modales <dialog>
-Objekt. Dialogfeld mit „Modales Dialogfeld öffnen“ öffnen Schaltfläche. Es gibt drei Möglichkeiten, das Dialogfeld zu schließen: die Esc-Taste,
eine Schaltfläche mit dem Symbol formmethod="dialog"
festgelegt (oder wenn für das Formular method="dialog"
festgelegt ist) und die HTMLDialogElement.close()
-Methode.
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 Sie ein modales Dialogfeld öffnen, wird alles außer dem Dialogfeld selbst deaktiviert und verdeckt. 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 in das Dialogfeld verschoben. Der Fokus wird auf das erste Element in der sequenziellen Tastaturnavigationsreihenfolge innerhalb dieses Dialogfelds gesetzt.
Wenn Sie die Taste tab
wiederholt drücken, können nur der Inhalt des Dialogfelds hervorgehoben werden, während das modale Dialogfeld geöffnet ist.
öffnen. Alles außerhalb des modalen Dialogfelds ist inaktiv, solange es geöffnet ist.
Wenn ein Dialogfeld geschlossen wird, ob modal oder nicht, wird der Fokus wieder auf das Element gelegt, das das Dialogfeld geöffnet hat. Wenn Sie programmatisch Dialog nicht auf Basis der Nutzeraktion öffnen, überdenken. Falls nötig, achten Sie darauf, dass der Fokus dort liegt, wo er vor dem Öffnen des Dialogfelds war. vor allem, wenn der Nutzer das Dialogfeld schließt, ohne damit 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 kostenlos. das Attribut
nicht explizit festgelegt ist.
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 Pseudoelement
mit allen Hintergründen übereinstimmt, einschließlich des Hintergründes, der bei Verwendung der FullScreen API angezeigt wird,
z. B. wenn Sie ein Video im Vollbildmodus ansehen, das nicht dasselbe Seitenverhältnis wie der Bildschirm oder Monitor hat.
Nicht modale Dialogfelder
Das HTMLDialogElement.show()
öffnet ähnlich ein Dialogfeld, aber ohne einen Hintergrund hinzuzufügen oder etwas inaktiv zu machen.
Mit der Escape-Taste werden nicht modale Dialogfelder geschlossen. Daher ist es noch wichtiger, dass Sie eine Methode
nicht modales Dialogfeld schließen. Wenn der Abstand dabei außerhalb des Dialogfelds liegt, wird der Fokus auf das Element gelegt.
durch die das Dialogfeld geöffnet wurde.
Obwohl eine Schaltfläche zum Schließen des Dialogfelds gemäß der Spezifikation nicht offiziell erforderlich ist, betrachten Sie sie als erforderlich. Die Escape-Taste wird ein modales Dialogfeld geschlossen, jedoch kein nicht modales Dialogfeld. Eine sichtbare Schaltfläche, die fokussiert werden kann, verbessert die Barrierefreiheit und User Experience aus.
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 Schließen-Schaltfläche ohne JavaScript kann folgendermaßen geschrieben werden:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Vielleicht ist Ihnen schon einmal das Attribut autofocus
aufgefallen
in diesem Beispiel auf der <button>
festgelegt ist. 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. Aber einschließlich autofocus
in einem <dialog>
sollte nur mit Bedacht erfolgen. Alle Elemente in der Sequenz vor dem automatisch fokussierten Element werden übersprungen.
Dieses Attribut wird in der Fokus-Lektion näher erläutert.
Die HTMLDialogElement
-Oberfläche enthält ein returnValue
-Element
Property. Wenn du ein Formular mit einem method="dialog"
sendest, wird der returnValue
auf den name
(sofern vorhanden) der Schaltfläche „Senden“ gesetzt, die für Folgendes verwendet wurde:
senden Sie das Formular. 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 HTMLDialogElement.open
gibt true
oder false
zurück, je nachdem, ob das Dialogfeld für eine Interaktion verfügbar ist oder nicht.
JavaScript ist die bevorzugte Methode, um ein Dialogfeld zu öffnen, einschließlich des Attributs open
beim Seitenaufbau und des anschließenden Entfernens.
Mit .close()
können Sie dafür sorgen, dass das Dialogfeld auch dann verfügbar ist, 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üge nicht das Attribut tabindex
hinzu
direkt zum Dialogfeld.
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 sichtbarer Text für den barrierefreien Namen angeben 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. color
wird übernommen
von dialog
und nicht von body
oder :root
. Dies könnte unerwartet sein. Das Attribut background-color
wird nicht übernommen.
Wissen testen
Testen Sie Ihr Wissen über das Dialogelement.
Wie gestalten Sie den Bereich hinter dem Dialogfeld?
::background
.::backdrop
.background
.