HTMLDialogElement: requestClose() Methode
Baseline
2025
Newly available
Since May 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die requestClose()-Methode der HTMLDialogElement-Schnittstelle fordert das Schließen des <dialog>-Elements an. Ein optionaler String kann als Argument übergeben werden, das den returnValue des Dialogs aktualisiert.
Diese Methode unterscheidet sich von close(), da sie ein cancel-Ereignis auslöst, bevor das close-Ereignis ausgelöst wird. Autoren können Event.preventDefault() im Handler für das cancel-Ereignis aufrufen, um zu verhindern, dass der Dialog geschlossen wird.
Diese Methode bietet das gleiche Verhalten wie der interne Schließen-Beobachter des Dialogs.
Syntax
requestClose()
requestClose(returnValue)
Parameter
returnValueOptional-
Ein String, der einen aktualisierten Wert für den
HTMLDialogElement.returnValuedes Dialogs darstellt.
Rückgabewert
Keiner (undefined).
Beispiele
Verwendung von requestClose()
Das folgende Beispiel zeigt eine Schaltfläche, die beim Klicken einen <dialog> mit der showModal()-Methode öffnet. Von dort aus können Sie entweder auf die Schließen-Schaltfläche klicken, um die requestClose()-Methode aufzurufen und den Dialog zu schließen.
Die Schließen-Schaltfläche schließt den Dialog ohne einen returnValue, während die Schließen mit Rückgabewert-Schaltfläche den Dialog mit einem returnValue schließt.
Das Verhindern des Schließens des Dialogs wird mit einem Kontrollkästchen demonstriert.
HTML
<dialog id="dialog">
<div>
<label><input type="checkbox" id="prevent-close" /> Cancel close</label>
</div>
<button type="button" id="close">Close</button>
<button type="button" id="close-w-value">Close w/ return value</button>
</dialog>
<button id="open">Open dialog</button>
const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
const closeWithValueButton = document.getElementById("close-w-value");
const preventCloseInput = document.getElementById("prevent-close");
// Open button opens a modal dialog
openButton.addEventListener("click", () => {
// Reset the return value
dialog.returnValue = "";
// Show the dialog
dialog.showModal();
});
// Close button closes the dialog box
closeButton.addEventListener("click", () => {
dialog.requestClose();
});
// Close button closes the dialog box with a return value
closeWithValueButton.addEventListener("click", () => {
dialog.requestClose("some value");
});
// Fired when requestClose() is called
// Prevent the dialog from closing by calling event.preventDefault()
dialog.addEventListener("cancel", (event) => {
if (preventCloseInput.checked) {
log("Dialog close cancelled");
event.preventDefault();
}
});
// cancel event is not prevented, dialog will close
dialog.addEventListener("close", () => {
log(`Dialog closed. Return value: "${dialog.returnValue}"`);
});
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-dialog-requestclose |