Dialogfeld

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.