HTMLDialogElement

Erbt auch Eigenschaften von ihrer Elternschnittstelle, HTMLElement.

HTMLDialogElement.closedBy Experimentell

Ein String, der den closedby-Attributwert des <dialog>-Elements setzt oder zurückgibt und die Arten von Benutzeraktionen angibt, die zum Schließen des Dialogs verwendet werden können.

HTMLDialogElement.open

Ein boolescher Wert, der das HTML-Attribut open widerspiegelt und anzeigt, ob der Dialog zur Interaktion verfügbar ist.

HTMLDialogElement.returnValue

Ein String, der den Rückgabewert des Dialogs setzt oder zurückgibt.

Erbt auch Methoden von ihrer Elternschnittstelle, HTMLElement.

HTMLDialogElement.close()

Schließt den Dialog. Ein optionaler String kann als Argument übergeben werden, um den returnValue des Dialogs zu aktualisieren.

HTMLDialogElement.requestClose()

Fordert das Schließen des Dialogs an. Ein optionaler String kann als Argument übergeben werden, um den returnValue des Dialogs zu aktualisieren.

HTMLDialogElement.show()

Zeigt den Dialog modellos an, d.h. ermöglicht weiterhin Interaktionen mit Inhalten außerhalb des Dialogs.

HTMLDialogElement.showModal()

Zeigt den Dialog als modal an, über anderen möglicherweise vorhandenen Dialogen. Alles außerhalb des Dialogs ist inert, wobei Interaktionen außerhalb des Dialogs blockiert werden.

Erbt auch Ereignisse von ihrer Elternschnittstelle, HTMLElement.

Diese Ereignisse können mit addEventListener() abgehört werden, oder durch Zuweisung eines Ereignislisteners zur oneventname-Eigenschaft dieser Schnittstelle.

cancel

Wird ausgelöst, wenn der Dialog geschlossen werden soll, sei es mit der Escape-Taste oder über die Methode HTMLDialogElement.requestClose().

close

Wird ausgelöst, wenn der Dialog geschlossen wird, sei es mit der Escape-Taste, der Methode HTMLDialogElement.close(), oder durch das Absenden eines Formulars im Dialog mit method="dialog".

Das folgende Beispiel zeigt einen Button, der beim Klicken die Funktion HTMLDialogElement.showModal() verwendet, um einen modalen <dialog> mit einem Formular zu öffnen.

Während der Dialog geöffnet ist, ist alles außer dem Inhalt des modalen Dialogs inert. Sie können den Abbrechen-Button klicken, um den Dialog zu schließen (über die Funktion HTMLDialogElement.close()), oder das Formular über den Bestätigen-Button absenden.

Das Beispiel zeigt, wie Sie alle "Zustandsänderungs"-Ereignisse verwenden können, die beim Dialog ausgelöst werden können: cancel und close, sowie die geerbten Ereignisse beforetoggle und toggle.

HTML

<!-- pop-up dialog box, containing a form --> <dialog id="favDialog">   <form method="dialog">     <p>       <label for="favAnimal">Favorite animal:</label>       <select id="favAnimal" name="favAnimal">         <option></option>         <option>Brine shrimp</option>         <option>Red panda</option>         <option>Spider monkey</option>       </select>     </p>     <div>       <button id="cancel" type="reset">Cancel</button>       <button id="submit" type="submit">Confirm</button>     </div>   </form> </dialog>  <div>   <button id="updateDetails">Update details</button> </div> 

<pre id="log"></pre> 

#log {   height: 150px;   overflow: scroll;   padding: 0.5rem;   border: 1px solid black; } 

const logElement = document.querySelector("#log"); function log(text) {   logElement.innerText = `${logElement.innerText}${text}\n`;   logElement.scrollTop = logElement.scrollHeight; } 

JavaScript

Anzeigen des Dialogs

Der Code erhält zunächst Objekte für die <button>-Elemente, das <dialog>-Element und das <select>-Element. Dann wird ein Listener hinzugefügt, um die Funktion HTMLDialogElement.showModal() aufzurufen, wenn der Aktualisieren-Button geklickt wird.

const updateButton = document.getElementById("updateDetails"); const confirmButton = document.getElementById("submit"); const cancelButton = document.getElementById("cancel"); const dialog = document.getElementById("favDialog"); const selectElement = document.getElementById("favAnimal");  // Update button opens a modal dialog updateButton.addEventListener("click", () => {   dialog.showModal(); }); 

Abbrechen- und Bestätigen-Buttons

Als nächstes fügen wir Listener zu den click-Ereignissen der Bestätigen- und Abbrechen-Buttons hinzu. Die Handler rufen HTMLDialogElement.close() mit dem Auswahlwert (falls vorhanden) und ohne Wert auf, was wiederum den Rückgabewert des Dialogs (HTMLDialogElement.returnValue) auf den Auswahlwert und null setzt.

// Confirm button closes dialog if there is a selection. confirmButton.addEventListener("click", () => {   if (selectElement.value) {     // Set dialog.returnValue to selected value     dialog.close(selectElement.value);   } });  // Cancel button closes the dialog box cancelButton.addEventListener("click", () => {   dialog.close(); // Set dialog.returnValue to null }); 

close() auszuführen löst auch das close-Ereignis aus, welches wir unten implementieren, indem wir den Rückgabewert des Dialogs protokollieren. Wenn der Bestätigen-Button angeklickt wurde, sollte dies der ausgewählte Wert im Dialog sein, andernfalls sollte es null sein.

dialog.addEventListener("close", (event) => {   log(`close_event: (dialog.returnValue: "${dialog.returnValue}")`); }); 

Abbrechen-Ereignis

Das cancel-Ereignis wird ausgelöst, wenn "plattform spezifische Methoden" verwendet werden, um den Dialog zu schließen, wie die Esc-Taste. Es wird auch ausgelöst, wenn die Methode HTMLDialogElement.requestClose() aufgerufen wird. Das Ereignis ist "abbrechbar", was bedeutet, dass wir es verwenden könnten, um zu verhindern, dass der Dialog geschlossen wird. Hier behandeln wir das Abbrechen einfach als "Schließen"-Operation und setzen den HTMLDialogElement.returnValue auf "", um einen möglicherweise gesetzten Wert zu löschen.

dialog.addEventListener("cancel", (event) => {   log(`cancel_event: (dialog.returnValue: "${dialog.returnValue}")`);   dialog.returnValue = ""; // Reset value }); 

Umschalt-Ereignis

Das toggle event (geerbt von HTMLElement) wird unmittelbar nachdem ein Dialog geöffnet oder geschlossen wurde (aber vor dem geschlossen-Ereignis) ausgelöst.

Hier fügen wir einen Listener hinzu, um zu protokollieren, wann der Dialog geöffnet und geschlossen wird.

dialog.addEventListener("toggle", (event) => {   log(`toggle_event: Dialog ${event.newState}`); }); 

Beforetoggle-Ereignis

Das beforetoggle event (geerbt von HTMLElement) ist ein abbrechbares Ereignis, das unmittelbar bevor ein Dialog geöffnet oder geschlossen wird, ausgelöst wird. Bei Bedarf kann dies verwendet werden, um einen Dialog am Anzeigen zu hindern oder Operationen an anderen Elementen durchzuführen, die vom open/close-Zustand des Dialogs betroffen sind, wie das Hinzufügen von Klassen zu ihnen, um Animationen auszulösen.

In diesem Fall protokollieren wir einfach den alten und neuen Zustand.

dialog.addEventListener("beforetoggle", (event) => {   log(     `beforetoggle event: oldState: ${event.oldState}, newState: ${event.newState}`,   );    // Call event.preventDefault() to prevent a dialog opening   /*     if (shouldCancel()) {         event.preventDefault();     }   */ }); 

Ergebnis

Probieren Sie das untenstehende Beispiel aus. Beachten Sie, dass sowohl der Bestätigen- als auch der Abbrechen-Button dazu führen, dass das close-Ereignis ausgelöst wird, und das Ergebnis sollte die ausgewählte Dialogoption widerspiegeln.

• Das HTML-Element, das diese Schnittstelle implementiert: <dialog>.