HTMLDialogElement: requestClose() Methode

Baseline 2025

Neu verfügbar

Seit May 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>-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

returnValue Optional: Ein String, der einen aktualisierten Wert für den HTMLDialogElement.returnValue des 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

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>

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

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

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

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

Spezifikation
HTML # dom-dialog-requestclose

Browser-Kompatibilität

Siehe auch

HTML <dialog> Element
Das cancel-Ereignis

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden