HTMLDialogElement: requestClose() Methode

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

js
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.

html
<!-- 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>.