Das<dialog>HTML Element repräsentiert ein modales oder nicht modales Dialogfenster oder eine andere interaktive Komponente, wie z.B. eine entfernbare Benachrichtigung, einen Inspektor oder ein Unterfenster.

Das HTML-<dialog>-Element wird verwendet, um sowohl modale als auch nicht modale Dialogfenster zu erstellen. Modale Dialogfenster unterbrechen die Interaktion mit dem Rest der Seite, während nicht modale Dialogfenster die Interaktion mit dem Rest der Seite erlauben.

JavaScript sollte verwendet werden, um das<dialog>-Element anzuzeigen. Verwenden Sie die Methode.showModal(), um ein modales Dialogfenster anzuzeigen, und die Methode.show(), um ein nicht modales Dialogfenster anzuzeigen. Das Dialogfenster kann mit der Methode.close() oder mit derdialog Methode beim Absenden eines innerhalb des<dialog>-Elements verschachtelten<form> geschlossen werden. Modale Dialoge können auch durch Drücken derEsc-Taste geschlossen werden.

Attribute

Dieses Element beinhaltet dieglobalen Attribute.

closedby

Gibt die Arten von Benutzeraktionen an, die zum Schließen des<dialog>-Elements verwendet werden können. Dieses Attribut unterscheidet drei Methoden, wie ein Dialog geschlossen werden kann:

• EineBenutzeraktion zum leichten Schließen, bei der das<dialog> geschlossen wird, wenn der Benutzer außerhalb des Dialogs klickt oder tippt. Dies ist gleichbedeutend mit dem Verhalten"light dismiss" im Auto-Zustand von Popovers.
• Eineplattform-spezifische Benutzeraktion, wie das Drücken derEsc-Taste auf Desktop-Plattformen, oder eine "Zurück"- oder "Schließen"-Geste auf mobilen Plattformen.
• Ein entwicklerspezifischer Mechanismus, wie ein<button> mit einemclick-Handler, derHTMLDialogElement.close() aufruft, oder eine<form>-Einreichung.

Mögliche Werte sind:

any

Der Dialog kann mit einer der drei Methoden geschlossen werden.

closerequest

Der Dialog kann mit einer plattformspezifischen Benutzeraktion oder einem entwicklerspezifischen Mechanismus geschlossen werden.

none

Der Dialog kann nur mit einem entwicklerspezifischen Mechanismus geschlossen werden.

Wenn das<dialog>-Element keinen gültigenclosedby-Wert angegeben hat, dann

• verhält es sich, wenn es mitshowModal() geöffnet wurde, so als hätte der Wert"closerequest"
• andernfalls verhält es sich, als wäre der Wert"none".

open

Zeigt an, dass das Dialogfenster aktiv ist und für die Interaktion zur Verfügung steht. Wenn dasopen-Attribut nicht gesetzt ist, ist das Dialogfenster für den Benutzer nicht sichtbar.Es wird empfohlen, die Methoden.show() oder.showModal() zu verwenden, um Dialoge darzustellen, anstatt dasopen-Attribut zu verwenden. Wenn ein<dialog> mit demopen-Attribut geöffnet wird, ist es nicht modal.

Hinweis:Während Sie zwischen den offenen und geschlossenen Zuständen von nicht modalen Dialogfenstern wechseln können, indem Sie die Anwesenheit desopen-Attributs ändern, wird dieser Ansatz nicht empfohlen. Sieheopen für weitere Informationen.

Verwendungsnotizen

• HTML<form>-Elemente können verwendet werden, um ein Dialogfeld zu schließen, wenn sie das Attributmethod="dialog" haben oder wenn der Button, der verwendet wird, um das Formular einzureichen,formmethod="dialog" gesetzt hat. Wenn ein<form> innerhalb eines<dialog> mit derdialog-Methode übermittelt wird, schließt sich das Dialogfeld, die Zustände der Formularelemente werden gespeichert, aber nicht übermittelt, und diereturnValue-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 Dialog mit der MethodeHTMLDialogElement.showModal() angezeigt wird. Zum Beispiel könnte dieses Pseudo-Element verwendet werden, um den inaktiven Inhalt hinter dem modalen Dialog zu verwischen, abzudunkeln oder anderweitig zu verdecken.
• Dasautofocus-Attribut sollte zu dem Element hinzugefügt werden, mit dem der Benutzer unmittelbar nach dem Öffnen eines modalen Dialogs interagieren soll. Wenn kein anderes Element eine dringendere Interaktion erfordert, wird empfohlen,autofocus dem Schließen-Button im Dialog oder dem Dialog selbst hinzuzufügen, wenn erwartet wird, dass der Benutzer darauf klicken/aktivieren soll, um es zu schließen.
• Fügen Sie dem<dialog>-Element nicht dietabindex-Eigenschaft hinzu, da es nicht interaktiv ist und keinen Fokus erhält. Die Inhalte des Dialogs, einschließlich des Schließen-Buttons im Dialog, können den Fokus erhalten und interaktiv sein.

Barrierefreiheit

Beim Implementieren eines Dialogs ist es wichtig zu überlegen, wo der Benutzerfokus am besten gesetzt werden sollte. Wenn die MethodeHTMLDialogElement.showModal() verwendet wird, um ein<dialog> zu öffnen, wird der Fokus auf das erste fokussierbare verschachtelte Element gesetzt. Das explizite Angeben der ursprünglichen Fokusplatzierung durch dasautofocus-Attribut hilft sicherzustellen, dass der ursprüngliche Fokus auf das Element gesetzt wird, das als die beste anfängliche Fokusplatzierung für einen bestimmten Dialog angesehen wird. In Zweifelsfällen, da es möglicherweise nicht immer bekannt ist, wo der anfängliche Fokus innerhalb eines Dialogs gesetzt werden könnte, insbesondere bei Instanzen, in denen der Inhalt eines Dialogs beim Aufruf dynamisch gerendert wird, könnte das<dialog>-Element selbst die beste anfängliche Fokusplatzierung bieten.

Stellen Sie sicher, dass eine Möglichkeit bereitgestellt wird, mit der Benutzer den Dialog schließen können. Die robusteste Möglichkeit, sicherzustellen, dass alle Benutzer den Dialog schließen können, besteht darin, einen expliziten Button dafür bereitzustellen, wie z.B. einen Bestätigungs-, Abbruchs- oder Schließen-Button.

Standardmäßig kann ein Dialog, der mit dershowModal()-Methode aufgerufen wurde, durch Drücken derEsc-Taste geschlossen werden. Ein nicht modales Dialog wird standardmäßig nicht durch dieEsc-Taste geschlossen, und je nach Art des nicht modalen Dialogs könnte dieses Verhalten nicht gewünscht sein. Tastaturbenutzer erwarten, dass dieEsc-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 derEsc-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 Benutzerfreundlichkeits- und Barrierefreiheitsmerkmale, die repliziert werden müssen, wenn Sie andere Elemente für einen ähnlichen Zweck verwenden. Wenn Sie eine benutzerdefinierte Dialog-Implementierung erstellen, stellen Sie sicher, dass alle erwarteten Standardverhalten unterstützt und die richtigen Beschriftungsempfehlungen befolgt werden.

Das<dialog>-Element wird von Browsern ähnlich behandelt wie benutzerdefinierte Dialoge, die das ARIArole="dialog"-Attribut verwenden.<dialog>-Elemente, die von der MethodeshowModal() aufgerufen werden, haben implizitaria-modal="true", während<dialog>-Elemente, die von der Methodeshow() aufgerufen werden oder die mit demopen-Attribut oder durch Ändern der Standardanzeige eines<dialog> geöffnet werden, als[aria-modal="false"] dargestellt werden. Beim Implementieren von modalen Dialogen sollte alles außer dem<dialog> und seinen Inhalten mit deminert-Attribut inaktiv gemacht werden. Beim Verwenden von<dialog> zusammen mit der MethodeHTMLDialogElement.showModal() wird dieses Verhalten vom Browser bereitgestellt.

Beispiele

Nur-HTML-Dialog

Dieses Beispiel zeigt die Erstellung eines nicht modalen Dialogs nur mit HTML. Wegen des booleschenopen-Attributs im<dialog>-Element erscheint das Dialog geöffnet, wenn die Seite geladen wird. Das Dialog kann durch Klicken auf den Button "OK" geschlossen werden, da dasmethod-Attribut im<form>-Element auf"dialog" gesetzt ist. In diesem Fall wird kein JavaScript benötigt, um das Formular zu schließen.

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

Ergebnis

Dieses Dialog ist anfangs wegen des Vorhandenseins desopen-Attributs geöffnet. Dialoge, die mit demopen-Attribut angezeigt werden, sind nicht modal. Nach dem Klicken auf "OK" wird das Dialog beendet, wodurch der Ergebnishintergrund leer bleibt. Wenn das Dialog beendet wird, gibt es keine Methode, um es erneut zu öffnen. Aus diesem Grund ist es bevorzugt, nicht modale Dialoge mit der MethodeHTMLDialogElement.show() anzuzeigen. Es ist möglich, die Anzeige des Dialogs zu wechseln, indem man das boolescheopen-Attribut hinzufügt oder entfernt, aber es wird nicht empfohlen.

Erstellung eines modalen Dialogs

Dieses Beispiel zeigt ein modales Dialog mit einemGradienten-Hintergrund. Die Methode.showModal() öffnet den modalen Dialog, wenn der "Show the dialog"-Button aktiviert wird. Der Dialog kann durch Drücken derEsc-Taste oder über dieclose()-Methode geschlossen werden, wenn der "Close"-Button im Dialog aktiviert wird.

Wenn ein Dialog geöffnet wird, gibt der Browser standardmäßig den Fokus auf das erste fokussierbare Element innerhalb des Dialogs. In diesem Beispiel wird dasautofocus-Attribut auf den "Close"-Button angewendet, um ihm den Fokus zu geben, wenn der Dialog geöffnet wird, da dies das Element ist, mit dem der Benutzer direkt 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 mittels des::backdrop Pseudo-Elements 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 den Methoden.close() oder.requestClose() 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 modallyshowButton.addEventListener("click", () => {  dialog.showModal();});// "Close" button closes the dialogcloseButton.addEventListener("click", () => {  dialog.close();});

Ergebnis

Wenn der modale Dialog angezeigt wird, erscheint er über allen anderen möglicherweise vorhandenen Dialogen. Alles außerhalb des modalen Dialogs ist inaktiv, und Interaktionen außerhalb des Dialogs sind blockiert. Beachten Sie, dass, wenn der Dialog geöffnet ist, mit Ausnahme des Dialogs selbst, keine Interaktion mit dem Dokument möglich ist; der "Show the dialog"-Button ist größtenteils durch den fast undurchsichtigen Hintergrund des Dialogs verdeckt und ist inaktiv.

Umgang mit dem Rückgabewert des Dialogs

Dieses Beispiel demonstriert denreturnValue des<dialog>-Elements und wie man einen modalen Dialog schließt, indem man ein Formular verwendet. Standardmäßig ist derreturnValue der leere String oder der Wert des Buttons, der das Formular innerhalb des<dialog>-Elements eingereicht hat, falls vorhanden.

In diesem Beispiel wird ein modales Dialog geöffnet, wenn der "Show the dialog"-Button aktiviert wird. Der Dialog enthält ein Formular mit einem<select> und zwei<button>-Elementen, die standardmäßig auftype="submit" gesetzt sind. Ein Ereignis-Handler aktualisiert den Wert des "Confirm"-Buttons, wenn die Auswahloption geändert wird. Wenn der "Confirm"-Button aktiviert wird, um den Dialog zu schließen, ist der aktuelle Wert des Buttons der Rückgabewert. Wenn der Dialog geschlossen wird, indem der "Cancel"-Button gedrückt wird, ist derreturnValuecancel.

Wenn der Dialog geschlossen wird, wird der Rückgabewert unter dem "Show the dialog"-Button angezeigt. Wenn der Dialog durch Drücken derEsc-Taste geschlossen wird, wird derreturnValue nicht aktualisiert, und dasclose-Ereignis tritt nicht ein, sodass der Text im<output> nicht aktualisiert wird.

HTML

<!-- A modal dialog containing a form --><dialog>  <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 value="default">Confirm</button>    </div>  </form></dialog><p>  <button>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> modallyshowButton.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 zeigen die folgenden drei Methoden, um modale Dialoge zu schließen:

• Durch Einreichen des Formulars innerhalb des Dialogformulars mithilfe derdialog-Methode (wie imNur-HTML-Beispiel gezeigt).
• Durch Drücken derEsc-Taste.
• Durch Aufrufen der MethodeHTMLDialogElement.close() (wie immodale Beispiel gezeigt).In diesem Beispiel schließt der "Cancel"-Button den Dialog über diedialog-Formularmethode, und der "Confirm"-Button schließt den Dialog über die MethodeHTMLDialogElement.close().

Der "Cancel"-Button enthält dasformmethod="dialog"-Attribut, das die StandardeinstellungGET des<form>-Elements überschreibt. Wenn die Methode eines Formularsdialog ist, wird der Zustand des Formulars gespeichert, aber nicht übermittelt, und der Dialog wird geschlossen.

Ohneaction bewirkt das Einreichen des Formulars über die StandardmethodeGET ein Nachladen der Seite. Wir verwenden JavaScript, um die Übermittlung zu verhindern und das Dialog mit den Methodenevent.preventDefault() undHTMLDialogElement.close() zu schließen.

Es ist wichtig, innerhalb jedesdialog-Elements einen Schließmechanismus bereitzustellen. DieEsc-Taste schließt standardmäßig keine nicht modalen Dialoge, und man kann nicht davon ausgehen, dass ein Benutzer überhaupt Zugriff auf eine physische Tastatur hat (z.B. jemand, der ein Touchscreen-Gerät ohne Tastatur verwendet).

Schließen eines Dialogs mit einer erforderlichen Formulareingabe

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 einen solchen Dialog zu schließen, verwenden Sie entweder das Attributformnovalidate am Schließen-Button oder rufen Sie die Methodeclose() des Dialog-Objekts auf, wenn der Schließen-Button angeklickt wird.

<dialog>  <form method="dialog">    <p>      <label>        Favorite animal:        <input type="text" required />      </label>    </p>    <div>      <input type="submit" value="Normal close" />      <input        type="submit"               value="Novalidate close"        formnovalidate />      <input type="submit" value="JS close" />    </div>  </form></dialog><p>  <button>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 ersieht man, dass es unmöglich ist, den Dialog mit demNormal schließen-Button zu schließen. Aber der Dialog kann geschlossen werden, wenn wir die Formularvalidierung mit demformnovalidate-Attribut amCancel-Button umgehen. Programmgesteuert wirddialog.close() auch solche Dialoge schließen.

Vergleich verschiedenerclosedby-Verhaltensweisen

Dieses Beispiel zeigt den Unterschied im Verhalten zwischen verschiedenen Werten desclosedby Attributs.

HTML

Wir bieten drei<button>-Elemente und drei<dialog>-Elemente an. Jeder Button wird so programmiert, dass er einen anderen Dialog öffnet, der das Verhalten eines der drei Werte desclosedby-Attributs —none,closerequest undany — demonstriert. Beachten Sie, dass jedes<dialog>-Element ein<button>-Element enthält, das zum Schließen verwendet wird.

<p>Choose a <code>&lt;dialog&gt;</code> type to show:</p><div>  <button><code>closedby="none"</code></button>  <button>    <code>closedby="closerequest"</code>  </button>  <button><code>closedby="any"</code></button></div><dialog closedby="none">  <h2><code>closedby="none"</code></h2>  <p>    Only closable using a specific provided mechanism, which in this case is    pressing the "Close" button below.  </p>  <button>Close</button></dialog><dialog closedby="closerequest">  <h2><code>closedby="closerequest"</code></h2>  <p>Closable using the "Close" button or the Esc key.</p>  <button>Close</button></dialog><dialog closedby="any">  <h2><code>closedby="any"</code></h2>  <p>    Closable using the "Close" button, the Esc key, or by clicking outside the    dialog. "Light dismiss" behavior.  </p>  <button>Close</button></dialog>

body {  font-family: sans-serif;}#controls {  display: flex;  justify-content: space-around;}dialog {  width: 480px;  border-radius: 5px;  border-color: rgb(0 0 0 / 0.3);}dialog h2 {  margin: 0;}dialog p {  line-height: 1.4;}

JavaScript

Hier weisen wir verschiedenen Variablen die Referenz auf die Hauptsteuerungs-<button>-Elemente, die<dialog>-Elemente und die "Close"-<button>-Elemente in den Dialogen zu. Zunächst weisen wir jedem Steuerungsbutton einenclick Ereignis-Listener zu, dessen Ereignis-Handler-Funktion das zugehörige<dialog>-Element übershowModal() öffnet. Dann durchlaufen wir die "Close"-<button>-Referenzen und weisen jeder davon einenclick Ereignishandler zu, der das zugehörige<dialog>-Element überclose() schließt.

const noneBtn = document.getElementById("none-btn");const closerequestBtn = document.getElementById("closerequest-btn");const anyBtn = document.getElementById("any-btn");const noneDialog = document.querySelector("[closedby='none']");const closerequestDialog = document.querySelector("[closedby='closerequest']");const anyDialog = document.querySelector("[closedby='any']");const closeBtns = document.querySelectorAll(".close");noneBtn.addEventListener("click", () => {  noneDialog.showModal();});closerequestBtn.addEventListener("click", () => {  closerequestDialog.showModal();});anyBtn.addEventListener("click", () => {  anyDialog.showModal();});closeBtns.forEach((btn) => {  btn.addEventListener("click", () => {    btn.parentElement.close();  });});

Ergebnis

Das gerenderte Ergebnis ist wie folgt:

Versuchen Sie, jeden Button zu klicken, um einen Dialog zu öffnen. Der erste kann nur durch Klicken auf seinen "Close"-Button geschlossen werden. Der zweite kann auch über eine gerätespezifische Benutzeraktion, wie das Drücken derEsc-Taste, geschlossen werden. Der dritte hat ein vollständiges"light-dismiss"-Verhalten, sodass er auch durch Klicken oder Tippen außerhalb des Dialogs geschlossen werden kann.

Animierung von Dialogen

<dialog>-Elemente werden aufdisplay: none; gesetzt, wenn sie verborgen sind unddisplay: block; wenn sie angezeigt werden, sowie aus demobersten Schicht und demBarrierefreiheitsbaum entfernt bzw. hinzugefügt. Daher muss dasdisplay-Eigenschaft animierbar sein, damit<dialog>-Elemente animiert werden können.Unterstützende Browser animierendisplay mit einer Variation desdiskreten Animationstyps. Insbesondere schaltet der Browser zwischennone und einem anderendisplay-Wert um, sodass der animierte Inhalt für die gesamte Animationsdauer sichtbar bleibt.

Zum Beispiel:

• Wenndisplay vonnone zublock (oder einem anderen sichtbarendisplay-Wert) animiert wird, wird der Wert zublock bei0% der Animationsdauer umgeschaltet, sodass er während der gesamten Zeit sichtbar bleibt.
• Wenndisplay vonblock (oder einem anderen sichtbarendisplay-Wert) zunone animiert wird, wird der Wert zunone bei100% der Animationsdauer umgeschaltet, sodass er während der gesamten Zeit sichtbar bleibt.

Übergänge bei Dialogelementen

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

@starting-style-Regel

Bietet eine Reihe von Startwerten für Eigenschaften, die am<dialog> gesetzt sind und von denen Sie jedes Mal aus Übergänge vornehmen möchten, wenn es geöffnet wird. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig treten CSS-Übergänge nur auf, wenn eine Eigenschaft von einem Wert zu einem anderen bei einem sichtbaren Element geändert wird; sie werden nicht durch die ersten Stilaktualisierungen von Elementen oder wenn der Anzeigetyp vonnone zu einem anderen Typ wechselt ausgelöst.

display-Eigenschaft

Fügen Siedisplay zur Übergangsliste hinzu, damit das<dialog> für die Dauer des Übergangs beidisplay: block (oder einem anderen sichtbarendisplay-Wert dort, wo es im geöffneten Zustand des Dialogs gesetzt ist) bleibt, was sicherstellt, dass die anderen Übergänge sichtbar sind.

overlay-Eigenschaft

Fügen Sieoverlay zur Übergangsliste hinzu, um sicherzustellen, dass das Entfernen des<dialog> aus der obersten Schicht bis zum Abschluss des Übergangs zurückgestellt wird, was wiederum sicherstellt, dass der Übergang sichtbar ist.

transition-behavior-Eigenschaft

Setzen Sietransition-behavior: allow-discrete auf diedisplay- undoverlay-Übergänge (oder auf dietransition-Kurzschreibung), um diskrete Übergänge bei diesen zwei Eigenschaften zu ermöglichen, die standardmäßig nicht animierbar sind.

Hier ist ein kleines Beispiel, um zu zeigen, wie dies aussehen könnte.

HTML

Das HTML enthält ein<dialog>-Element, sowie einen Button, um das Dialog zu zeigen. Zusätzlich enthält das<dialog>-Element einen weiteren Button, um sich selbst zu schließen.

<dialog>  Content here  <button>close</button></dialog><button>Show Modal</button>

CSS

Im CSS fügen wir einen@starting-style-Block ein, der die Übergangsstil-Startwerte für dieopacity- undtransform-Eigenschaften definiert, Übergang-Endwerte imdialog:open-Zustand, und die Standardwerte im Standard-dialog-Zustand, um nach dem ersten Auftreten des<dialog> zum Zurückübergehen zu umstellen. Beachten Sie, wie die Übergangsliste des<dialog> nicht nur diese Eigenschaften, sondern auch diedisplay- undoverlay-Eigenschaften enthält, jeweils mitallow-discrete darauf gesetzt.

Wir setzen auch einen Startwert für diebackground-color-Eigenschaft auf dem::backdrop, das hinter dem<dialog> erscheint, wenn es geöffnet wird, um eine schöne Dunkelungsanimation zu bieten. Derdialog:open::backdrop-Selektor wählt nur Backdrops von<dialog>-Elementen aus, wenn der Dialog geöffnet 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: transparent;  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 selectorbecause the nesting selector cannot represent pseudo-elements. */@starting-style {  dialog:open::backdrop {    background-color: transparent;  }}

JavaScript

Das JavaScript fügt den Schaltflächen Show und Close Ereignis-Handler hinzu, die sie dazu bringen, das<dialog> zu zeigen und zu schließen, wenn sie geklickt 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:

Keyframe-Animationen für Dialog

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

• Sie geben kein@starting-style an.
• Sie schließen dendisplay-Wert in einem Keyframe ein; dies wird derdisplay-Wert für die gesamte Animation sein oder bis ein anderer nicht-none-Display-Wert auftritt.
• Sie müssen diskrete Animationen nicht explizit aktivieren; es gibt keinallow-discrete innerhalb von Keyframes.
• Sie müssenoverlay auch nicht innerhalb von Keyframes einstellen; diedisplay-Animation behandelt die Animation des<dialog> vom gezeigten zum verborgenen Zustand.

Betrachten wir ein Beispiel, damit Sie sehen können, wie das aussieht.

HTML

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

<dialog>  Content here  <button>close</button></dialog><button>Show Modal</button>

CSS

Das CSS definiert Keyframes, um zwischen den geschlossenen und gezeigten Zuständen des<dialog> zu animieren, plus die Einblendanimation für das<dialog>-Backdrop. Die<dialog>-Animationen beinhalten die Animation vondisplay, um sicherzustellen, dass die tatsächlichen sichtbaren Animationseffekte für die gesamte Dauer sichtbar bleiben. Beachten Sie, dass es nicht möglich war, das Backdrop-Ausblenden zu animieren — das Backdrop wird sofort aus dem DOM entfernt, wenn das<dialog> geschlossen wird, daher gibt es nichts zu animieren.

dialog {  animation: fade-out 0.7s ease-out;}dialog:open {  animation: fade-in 0.7s ease-out;}dialog:open::backdrop {  background-color: black;  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% {    opacity: 0;  }  100% {    opacity: 0.25;  }}body,button {  font-family: system-ui;}

JavaScript

Schließlich fügt das JavaScript den Schaltflächen Ereignis-Handler hinzu, um das<dialog> zu zeigen und zu schließen:

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:

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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