HTMLDialogElement: requestClose() Methode

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

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 der HTMLDialogElement.close()-Methode dadurch, dass ein cancel-Ereignis ausgelöst wird, bevor das close-Ereignis ausgelöst wird. Dies ermöglicht es den Autoren, das Schließen des Dialogs zu verhindern. Diese Methode zeigt dasselbe 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 Klicken ein <dialog> mit einem Formular über die showModal()-Methode öffnet. 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 Absenden-Button einreichen.

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 den type="submit" hätte, wäre der Dialog ohne JavaScript geschlossen worden. Ein Formulareinsendung schließt das <dialog>, in dem es verschachtelt ist, wenn die Methode des Formulars dialog ist, sodass kein "Schließen"-Button erforderlich ist.

Ergebnis

Spezifikationen

Specification
HTML
# dom-dialog-requestclose

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Das HTML-Element, das diese Schnittstelle implementiert: <dialog>.