Dialogfeld

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.