<dialog>: Das Dialog-Element

Dieses Element umfasst die globalen Attribute.

open

Zeigt an, dass das Dialogfenster aktiv und zur Interaktion verfügbar ist. Wenn das open-Attribut nicht gesetzt ist, wird das Dialogfenster für den Benutzer nicht sichtbar sein. Es wird empfohlen, die .show()- oder .showModal()-Methode zu verwenden, um Dialoge darzustellen, anstatt das open-Attribut zu verwenden. Wenn ein <dialog> mithilfe des open-Attributs geöffnet wird, ist es nicht-modal.

Hinweis: Auch wenn Sie den offenen und geschlossenen Zustand nicht-modaler Dialogfenster durch Umschalten der Anwesenheit des open-Attributes umschalten können, wird dieser Ansatz nicht empfohlen. Siehe open für weitere Informationen.

• HTML <form>-Elemente können verwendet werden, um ein Dialogfenster zu schließen, wenn sie das Attribut method="dialog" haben oder wenn der Button, der das Formular absendet, formmethod="dialog" gesetzt hat. Wird ein <form> innerhalb eines <dialog> über die dialog-Methode abgesendet, schließt sich das Dialogfenster, die Zustände der Formularsteuerungen werden gespeichert, aber nicht abgesendet, und die returnValue-Eigenschaft wird auf den Wert des Buttons gesetzt, der aktiviert wurde.
• Das CSS-::backdrop-Pseudo-Element kann verwendet werden, um den Hintergrund eines modalen Dialogs zu gestalten, der hinter dem <dialog>-Element angezeigt wird, wenn das Dialogfenster mit der HTMLDialogElement.showModal()-Methode angezeigt wird. Zum Beispiel könnte dieses Pseudo-Element verwendet werden, um den inerten Inhalt hinter dem modalen Dialog zu verwischen, abzudunkeln oder anderweitig zu verdecken.
• Das autofocus-Attribut sollte dem Element hinzugefügt werden, mit dem der Benutzer unmittelbar nach dem Öffnen eines modalen Dialogs interagieren soll. Wenn kein anderes Element eine unmittelbarere Interaktion mit sich bringt, wird empfohlen, autofocus dem Schließ-Button innerhalb des Dialogs oder dem Dialog selbst hinzuzufügen, wenn der Benutzer erwartet wird, darauf zu klicken/zu aktivieren, um es zu schließen.
• Fügen Sie dem <dialog>-Element nicht das tabindex-Attribut hinzu, da es nicht interaktiv ist und keinen Fokus erhält. Die Inhalte des Dialogs, einschließlich des Schließ-Buttons, der im Dialog enthalten ist, können jedoch den Fokus erhalten und interaktiv sein.

Bei der Implementierung eines Dialogs ist es wichtig, den geeignetsten Ort für den Benutzerfokus zu berücksichtigen. Beim Öffnen eines <dialog> mit HTMLDialogElement.showModal(), wird der Fokus auf das erste verschachtelte fokussierbare Element gesetzt. Die explizite Angabe der anfänglichen Fokusplatzierung durch das autofocus-Attribut hilft sicherzustellen, dass der anfängliche Fokus auf das als besten Platz für den anfänglichen Fokus betrachtete Element gesetzt wird. Bei Unsicherheiten, insbesondere wenn der Inhalt eines Dialogs dynamisch gerendert wird, wenn er aufgerufen wird, könnte das <dialog>-Element selbst die beste anfängliche Fokusplatzierung bieten.

Stellen Sie sicher, dass eine Möglichkeit bereitgestellt wird, Benutzern das Schließen des Dialogs zu ermöglichen. Der robusteste Weg, um sicherzustellen, dass alle Benutzer den Dialog schließen können, besteht darin, einen expliziten Button dafür einzuschließen, z.B. einen Bestätigungs-, Abbruch- oder Schließ-Button.

Standardmäßig kann ein Dialog, der mit der showModal()-Methode aufgerufen wird, durch Drücken der Esc-Taste geschlossen werden. Ein nicht-modales Dialog schließt sich standardmäßig nicht über die Esc-Taste, und je nach dem, was das nicht-modale Dialog darstellt, kann es nicht gewünscht sein, dass dieses Verhalten auftritt. Tastaturbenutzer erwarten, dass die Esc-Taste modale Dialoge schließt; stellen Sie sicher, dass dieses Verhalten implementiert und beibehalten wird. Wenn mehrere modale Dialoge geöffnet sind, sollte das Drücken der Esc-Taste nur den zuletzt angezeigten Dialog schließen. Beim Verwenden von <dialog> wird dieses Verhalten vom Browser bereitgestellt.

Obwohl Dialoge mit anderen Elementen erstellt werden können, bietet das native <dialog>-Element Benutzerfreundlichkeit und Barrierefreiheitsfunktionen, die repliziert werden müssen, wenn Sie andere Elemente für einen ähnlichen Zweck verwenden. Wenn Sie eine benutzerdefinierte Dialogimplementierung erstellen, stellen Sie sicher, dass alle erwarteten Standardverhalten unterstützt werden und die entsprechenden Beschriftungsempfehlungen befolgt werden.

Das <dialog>-Element wird von Browsern in ähnlicher Weise behandelt wie benutzerdefinierte Dialoge, die das ARIA-Attribut role="dialog" verwenden. <dialog>-Elemente, die mit der showModal()-Methode aufgerufen werden, haben implizit aria-modal="true", während <dialog>-Elemente, die per show()-Methode oder über das open-Attribut angezeigt werden oder indem die Standardanzeige eines <dialog> geändert wird, als [aria-modal="false"] dargestellt werden. Beim Implementieren von Modal-Dialogen sollte alles andere als das <dialog> und dessen Inhalt als inert gerendert werden, indem das inert-Attribut verwendet wird. Beim Verwenden von <dialog> zusammen mit der HTMLDialogElement.showModal()-Methode wird dieses Verhalten vom Browser bereitgestellt.

Dieses Beispiel zeigt die Erstellung eines nicht-modalen Dialogs nur mit HTML. Aufgrund des booleschen open-Attributs im <dialog>-Element erscheint das Dialogfenster geöffnet, wenn die Seite geladen wird. Das Dialogfenster kann geschlossen werden, indem auf den "OK"-Button geklickt wird, weil das method-Attribut im <form>-Element auf "dialog" gesetzt ist. In diesem Fall ist kein JavaScript nötig, um das Formular zu schließen.

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Ergebnis

Dieses Dialogfenster ist anfänglich geöffnet, weil das open-Attribut vorhanden ist. Dialoge, die mit dem open-Attribut angezeigt werden, sind nicht-modal. Nach dem Klick auf "OK" wird das Dialogfenster geschlossen, und der Ergebnisrahmen bleibt leer. Wenn das Dialogfenster geschlossen wird, gibt es keine bereitgestellte Methode, um es erneut zu öffnen. Aus diesem Grund ist die bevorzugte Methode zur Anzeige nicht-modaler Dialoge die Verwendung der HTMLDialogElement.show()-Methode. Es ist möglich, die Anzeige des Dialogs durch Hinzufügen oder Entfernen des booleschen open-Attributs zu steuern, aber es ist nicht die empfohlene Praxis.

Dieses Beispiel zeigt einen modalen Dialog mit einem Gradienten im Hintergrund. Die .showModal()-Methode öffnet das modale Dialogfenster, wenn der Button "Show the dialog" aktiviert wird. Das Dialogfenster kann durch Drücken der Esc-Taste oder über die close()-Methode geschlossen werden, wenn der Button "Close" innerhalb des Dialogs aktiviert wird.

Wenn ein Dialog geöffnet wird, setzt der Browser standardmäßig den Fokus auf das erste Element, das im Dialog fokussiert werden kann. In diesem Beispiel wird das autofocus-Attribut auf den Button "Close" angewendet, wodurch dieser den Fokus erhält, wenn der Dialog geöffnet wird, da dies das Element ist, mit dem der Benutzer sofort nach dem Öffnen des Dialogs interagieren soll.

HTML

<dialog>
  <button autofocus>Close</button>
  <p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button>Show the dialog</button>

CSS

Wir können den Hintergrund des Dialogs mit dem ::backdrop-Pseudo-Element gestalten.

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

JavaScript

Der Dialog wird modal mit der .showModal()-Methode geöffnet und mit der .close()- oder .requestClose()-Methode geschlossen.

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

Ergebnis

Wenn das modale Dialogfenster angezeigt wird, erscheint es über allen anderen möglicherweise vorhandenen Dialogen. Alles außerhalb des modalen Dialogs ist inert, und Interaktionen außerhalb des Dialogs sind blockiert. Beachten Sie, dass bei geöffnetem Dialog, außer dem Dialog selbst, keine Interaktion mit dem Dokument möglich ist; der Button "Show the dialog" ist weitgehend vom nahezu undurchsichtigen Hintergrund des Dialogs verdeckt und ist inert.

Dieses Beispiel zeigt den returnValue des <dialog>-Elements und wie man ein modales Dialogfenster mit einem Formular schließt. Standardmäßig ist der returnValue die leere Zeichenkette oder der Wert des Buttons, der das Formular im <dialog>-Element absendet, wenn es einen gibt.

Dieses Beispiel öffnet ein modales Dialogfenster, wenn der Button "Show the dialog" aktiviert wird. Das Dialogfenster enthält ein Formular mit einem <select> und zwei <button>-Elementen, die standardmäßig type="submit" haben. Ein Event-Listener aktualisiert den Wert des "Confirm"-Buttons, wenn sich die Auswahloption ändert. Wenn der "Confirm"-Button aktiviert wird, um das Dialogfenster zu schließen, ist der aktuelle Wert des Buttons der Rückgabewert. Wenn der Dialog durch Drücken des "Cancel"-Buttons geschlossen wird, ist der returnValue cancel.

Wenn das Dialogfenster geschlossen wird, wird der Rückgabewert unter dem Button "Show the dialog" angezeigt. Wenn der Dialog durch Drücken der Esc-Taste geschlossen wird, wird der returnValue nicht aktualisiert, und das close-Ereignis tritt nicht auf, sodass der Text im <output> nicht aktualisiert wird.

HTML

<!-- A modal dialog containing a form -->
<dialog id="favDialog">
  <form>
    <p>
      <label>
        Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">Show the dialog</button>
</p>
<output></output>

JavaScript

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.
favDialog.addEventListener("close", (e) => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "No return value."
      : `ReturnValue: ${favDialog.returnValue}.`; // Have to check for "default" rather than empty string
});

// Prevent the "confirm" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the "close" event.
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault(); // We don't want to submit this fake form
  favDialog.close(selectEl.value); // Have to send the select box value here.
});

Ergebnis

Die obigen Beispiele demonstrieren die folgenden drei Methoden, um modale Dialoge zu schließen:

• Durch Absendung des Formulars innerhalb des Dialogformulars mit der dialog-Methode (wie im HTML-only Beispiel gezeigt).
• Durch Drücken der Esc-Taste.
• Durch Aufruf der HTMLDialogElement.close()-Methode (wie im modalen Beispiel gezeigt). In diesem Beispiel schließt der "Cancel"-Button den Dialog über die dialog-Formularmethode und der "Confirm"-Button schließt den Dialog über die HTMLDialogElement.close()-Methode.

Der "Cancel"-Button enthält das formmethod="dialog"-Attribut, das die Standard-GET-Methode des <form> außer Kraft setzt. Wenn die Methode eines Formulars dialog ist, wird der Zustand des Formulars gespeichert, aber nicht abgesendet, und das Dialogfenster wird geschlossen.

Ohne eine action würde das Absenden des Formulars über die Standard-GET-Methode zu einem Seiten-Reload führen. Wir verwenden JavaScript, um das Absenden zu verhindern und den Dialog mit den jeweiligen event.preventDefault() und HTMLDialogElement.close() Methoden zu schließen.

Es ist wichtig, innerhalb jedes dialog-Elements einen Mechanismus zum Schließen zu bieten. Die Esc-Taste schließt standardmäßig keine nicht-modalen Dialoge, noch kann man davon ausgehen, dass ein Benutzer Zugang zu einer physischen Tastatur hat (z.B. jemand, der ein Touchscreen-Gerät ohne Tastaturzugriff verwendet).

Wenn ein Formular innerhalb eines Dialogs eine erforderliche Eingabe hat, lässt der Benutzeragent Sie den Dialog nur schließen, wenn Sie einen Wert für die erforderliche Eingabe bereitstellen. Um ein solches Dialog zu schließen, verwenden Sie entweder das formnovalidate-Attribut am Schließ-Button oder rufen Sie die close()-Methode am Dialog-Objekt auf, wenn der Schließ-Button angeklickt wird.

<dialog id="dialog">
  <form method="dialog">
    <p>
      <label>
        Favorite animal:
        <input type="text" required />
      </label>
    </p>
    <div>
      <input type="submit" id="normal-close" value="Normal close" />
      <input
        type="submit"
        id="novalidate-close"
        value="Novalidate close"
        formnovalidate />
      <input type="submit" id="js-close" value="JS close" />
    </div>
  </form>
</dialog>
<p>
  <button id="show-dialog">Show the dialog</button>
</p>
<output></output>

[type="submit"] {
  margin-right: 1rem;
}

JavaScript

const showBtn = document.getElementById("show-dialog");
const dialog = document.getElementById("dialog");
const jsCloseBtn = dialog.querySelector("#js-close");

showBtn.addEventListener("click", () => {
  dialog.showModal();
});

jsCloseBtn.addEventListener("click", (e) => {
  e.preventDefault();
  dialog.close();
});

Ergebnis

Aus der Ausgabe sehen wir, dass es unmöglich ist, den Dialog mit dem Normal close-Button zu schließen. Aber der Dialog kann geschlossen werden, wenn wir die Formularvalidierung mit dem formnovalidate Attribut am Cancel-Button umgehen. Programmgesteuert wird dialog.close() auch einen solchen Dialog schließen.

<dialog>s sind auf display: none; eingestellt, wenn sie verborgen sind, und display: block;, wenn sie angezeigt werden, sowie aus der / in die obere Schicht und den Barrierefreiheitsbaum entfernt / hinzugefügt. Daher muss für <dialog>-Elemente das display-Eigenschaft animierbar sein, um animiert zu werden. Unterstützende Browser animieren display mit einer Variation des diskreten Animationstyps. Genauer gesagt, wechselt der Browser zwischen none und einem anderen display-Wert, sodass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird.

Zum Beispiel:

• Beim Animieren von display von none zu block (oder einem anderen sichtbaren display-Wert) wechselt der Wert zu block bei 0% der Animationsdauer, sodass er die ganze Zeit sichtbar ist.
• Beim Animieren von display von block (oder einem anderen sichtbaren display-Wert) zu none wechselt der Wert zu none bei 100% der Animationsdauer, sodass er die ganze Zeit sichtbar ist.

Übergangselemente des Dialogs

Beim Animieren von <dialog>-Elementen mit CSS-Übergängen sind folgende Funktionen erforderlich:

@starting-style-Atregel

Bietet einen Satz Anfangswerte für Eigenschaften, die am <dialog> gesetzt sind und von denen Sie bei jedem Öffnen wechseln möchten. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig erfolgen CSS-Übergänge nur, wenn eine Eigenschaft von einem Wert zu einem anderen auf einem sichtbaren Element ändert; sie werden nicht bei den ersten Stilaktualisierungen von Elementen oder bei Änderungen des display-Typs von none zu einem anderen Typ ausgelöst.

display-Eigenschaft

Fügen Sie display zur Übergangsliste hinzu, damit das <dialog> während der Dauer des Übergangs als display: block (oder ein anderer sichtbarer display-Wert im geöffneten Zustand des Dialogs) bleibt, um sicherzustellen, dass die anderen Übergänge sichtbar sind.

overlay-Eigenschaft

Schließen Sie overlay in der Übergangsliste ein, um sicherzustellen, dass die Entfernung des <dialog> aus der oberen Schicht bis zum Abschluss des Übergangs zurückgehalten wird, was wiederum sicherstellt, dass der Übergang sichtbar ist.

transition-behavior-Eigenschaft

Setzen Sie transition-behavior: allow-discrete auf den display und overlay-Übergängen (oder auf die transition-Abkürzung), um diskrete Übergänge auf diesen beiden Eigenschaften zu ermöglichen, die standardmäßig nicht animierbar sind.

Hier ist ein kurzes Beispiel, um zu zeigen, wie das aussehen könnte.

HTML

Der HTML-Code enthält ein <dialog>-Element sowie einen Button, um das Dialogfenster anzuzeigen. Zusätzlich enthält das <dialog>-Element einen weiteren Button, um sich selbst zu schließen.

<dialog id="dialog">
  Content here
  <button class="close">close</button>
</dialog>

<button class="show">Show Modal</button>

CSS

Im CSS fügen wir einen @starting-style-Block ein, der die Übergangsausgangsstile für die Eigenschaften opacity und transform definiert, Übergangsendsstyles auf den dialog:open-Zustand und Standardstyles auf den Standardzustand dialog, zu dem zurückgewechselt wird, sobald das <dialog> erschienen ist. Beachten Sie, wie die transition-Liste des <dialog> nicht nur diese Eigenschaften enthält, sondern auch die Eigenschaften display und overlay, jeweils mit allow-discrete darauf gesetzt.

Wir setzen auch einen Startstilwert für die background-color-Eigenschaft auf dem ::backdrop, das hinter dem <dialog> erscheint, wenn es geöffnet wird, um eine schöne Verdunklungsanimation zu bieten. Der dialog:open::backdrop-Selektor wählt nur die Hintergründe von <dialog>-Elementen aus, wenn das Dialog offen ist.

/* Open state of the dialog  */
dialog:open {
  opacity: 1;
  transform: scaleY(1);
}

/* Closed state of the dialog   */
dialog {
  opacity: 0;
  transform: scaleY(0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out,
    overlay 0.7s ease-out allow-discrete,
    display 0.7s ease-out allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

/* Before open state  */
/* Needs to be after the previous dialog:open rule to take effect,
    as the specificity is the same */
@starting-style {
  dialog:open {
    opacity: 0;
    transform: scaleY(0);
  }
}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition:
    display 0.7s allow-discrete,
    overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

dialog:open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* This starting-style rule cannot be nested inside the above selector
because the nesting selector cannot represent pseudo-elements. */

@starting-style {
  dialog:open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

JavaScript

Das JavaScript fügt Event-Handler zu den Schaltflächen hinzu, die bewirken, dass sie das <dialog> anzeigen und schließen, wenn sie angeklickt werden:

const dialogElem = document.getElementById("dialog");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

Ergebnis

Der Code wird wie folgt gerendert:

Dialog-Keyframe-Animationen

Beim Animieren eines <dialog> mit CSS-Keyframe-Animationen gibt es einige Unterschiede zu Übergängen:

• Es wird kein @starting-style bereitgestellt.
• Der display-Wert wird in einem Keyframe angegeben; dies wird der display-Wert für die gesamte Animation sein, oder bis ein anderer display-Wert, der nicht none ist, auftritt.
• Es ist nicht erforderlich, diskrete Animationen explizit zu aktivieren; es gibt kein Äquivalent zu allow-discrete innerhalb der Keyframes.
• Es ist nicht erforderlich, overlay innerhalb von Keyframes zu setzen; die Animation des display-Werts behandelt die Animation des <dialog> von angezeigt zu verborgen.

Sehen wir uns ein Beispiel an, um zu sehen, wie das aussieht.

HTML

Zuerst enthält der HTML-Code ein <dialog>-Element sowie einen Button, um das Dialogfenster anzuzeigen. Zusätzlich enthält das <dialog>-Element einen weiteren Button, um sich selbst zu schließen.

<dialog id="dialog">
  Content here
  <button class="close">close</button>
</dialog>

<button class="show">Show Modal</button>

CSS

Das CSS definiert Keyframes, um zwischen den geschlossenen und angezeigten Zuständen des <dialog> zu animieren, sowie die Einblendanimation für den Hintergrund des <dialog>. Die <dialog>-Animationen umfassen das Animieren von display, um sicherzustellen, dass die tatsächlichen sichtbaren Animationseffekte während der gesamten Dauer sichtbar bleiben. Beachten Sie, dass es nicht möglich war, das Ausblenden des Hintergrunds zu animieren - der Hintergrund wird sofort aus dem DOM entfernt, wenn das <dialog> geschlossen wird, sodass nichts animiert werden kann.

dialog {
  animation: fade-out 0.7s ease-out;
}

dialog:open {
  animation: fade-in 0.7s ease-out;
}

dialog:open::backdrop {
  animation: backdrop-fade-in 0.7s ease-out forwards;
}

/* Animation keyframes */

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: scaleY(1);
    display: block;
  }

  100% {
    opacity: 0;
    transform: scaleY(0);
    display: none;
  }
}

@keyframes backdrop-fade-in {
  0% {
    background-color: rgb(0 0 0 / 0%);
  }

  100% {
    background-color: rgb(0 0 0 / 25%);
  }
}

body,
button {
  font-family: system-ui;
}

JavaScript

Abschließend fügt das JavaScript Event-Handler zu den Schaltflächen hinzu, um das Anzeigen und Schließen des <dialog> zu ermöglichen:

const dialogElem = document.getElementById("dialog");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");

showBtn.addEventListener("click", () => {
  dialogElem.showModal();
});

closeBtn.addEventListener("click", () => {
  dialogElem.close();
});

Ergebnis

Der Code wird wie folgt gerendert:

• HTMLDialogElement-Schnittstelle
• close-Ereignis der HTMLDialogElement-Schnittstelle
• cancel-Ereignis der HTMLDialogElement-Schnittstelle
• open-Eigenschaft der HTMLDialogElement-Schnittstelle
• inert globales Attribut für HTML-Elemente
• ::backdrop CSS-Pseudo-Element
• Webformulare im Lernbereich