HTMLDialogElement: requestClose() Methode
Baseline 2025
Neu verfügbar
Seit Mai 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die requestClose()-Methode der HTMLDialogElement-Schnittstelle fordert das Schließen des <dialog> an. Ein optionaler String kann als Argument übergeben werden, um den returnValue des Dialogs zu aktualisieren.
Diese Methode unterscheidet sich von close() dadurch, dass 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 zeigt das gleiche Verhalten wie der interne Schließwächter 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 einen Button, der, wenn er angeklickt wird, ein <dialog> mithilfe der showModal()-Methode öffnet. Von dort aus können Sie einen der beiden Schließen-Schaltflächen klicken, um die requestClose()-Methode aufzurufen und den Dialog zu schließen.
Der Schließen-Button schließt den Dialog ohne returnValue, während der Button Schließen mit Rückgabewert den Dialog mit einem returnValue schließt.
Das Verhindern des Schließens des Dialogs wird mit einer Checkbox 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 canceled");
event.preventDefault();
}
});
// cancel event is not prevented, dialog will close
dialog.addEventListener("close", () => {
log(`Dialog closed. Return value: "${dialog.returnValue}"`);
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-dialog-requestclose |