HTMLDialogElement: requestClose() Methode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die requestClose()
-Methode der HTMLDialogElement
-Schnittstelle fordert das Schließen des <dialog>
an. Es kann ein optionaler String als Argument übergeben werden, der den returnValue
des Dialogs aktualisiert.
Diese Methode unterscheidet sich von der HTMLDialogElement.close()
-Methode, indem sie ein cancel
-Ereignis auslöst, bevor das close
-Ereignis ausgelöst wird. Dies ermöglicht es den Autoren zu verhindern, dass der Dialog geschlossen wird. Diese Methode zeigt das gleiche Verhalten wie der interne Schließ-Überwacher des Dialogs.
Syntax
requestClose()
requestClose(returnValue)
Parameter
returnValue
Optional-
Ein String, der einen aktualisierten Wert für den
HTMLDialogElement.returnValue
des Dialogs darstellt.
Rückgabewert
Keiner (undefined
).
Beispiele
Das folgende Beispiel zeigt einen einfachen Button, der beim Anklicken ein <dialog>
mit einem Formular öffnet, über die showModal()
-Methode. Von dort aus können Sie auf den X-Button klicken, um das Schließen des Dialogs anzufordern (über die HTMLDialogElement.requestClose()
-Methode) oder das Formular über den Senden-Button abschicken.
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<button id="close" aria-label="close" formnovalidate>X</button>
<section>
<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>
</section>
<menu>
<button type="reset">Reset</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
<script>
(() => {
const updateButton = document.getElementById("updateDetails");
const closeButton = document.getElementById("close");
const dialog = document.getElementById("favDialog");
// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
dialog.showModal();
});
// Form close button requests to close the dialog box
closeButton.addEventListener("click", () => {
dialog.requestClose("animalNotChosen");
});
function dialogShouldNotClose() {
// Add logic to decide whether to prevent the dialog from closing
}
dialog.addEventListener("cancel", (event) => {
if (!event.cancelable) return;
if (dialogShouldNotClose()) event.preventDefault();
});
})();
</script>
Wenn der "X"-Button vom type="submit"
wäre, würde der Dialog ohne JavaScript-Anforderung geschlossen. Eine Formularabsendung schließt das <dialog>
, in dem es verschachtelt ist, wenn die Method des Formulars dialog
ist, sodass kein "Schließen"-Button erforderlich ist.
Ergebnis
Spezifikationen
Specification |
---|
HTML # dom-dialog-requestclose |
Browser-Kompatibilität
Siehe auch
- Das HTML-Element, das diese Schnittstelle implementiert:
<dialog>
.