HTMLDialogElement: requestClose() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The requestClose() method of the HTMLDialogElement interface requests to close the <dialog>. An optional string may be passed as an argument, updating the returnValue of the dialog.

This method differs from the HTMLDialogElement.close() method by firing a cancel event before firing the close event. This allows authors to prevent the dialog from closing. This method exposes the same behavior as the dialog's internal close watcher.

Syntax

js
requestClose()
requestClose(returnValue)

Parameters

returnValue Optional

A string representing an updated value for the HTMLDialogElement.returnValue of the dialog.

Return value

None (undefined).

Examples

The following example shows a simple button that, when clicked, opens a <dialog> containing a form, via the showModal() method. From there you can click the X button to request to close the dialog (via the HTMLDialogElement.requestClose() method), or submit the form via the submit button.

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>

If the "X" button was of type="submit", the dialog would have closed without requiring JavaScript. A form submission closes the <dialog> it is nested within if the form's method is dialog, so no "close" button is required.

Result

Specifications

Specification
HTML
# dom-dialog-requestclose

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
requestClose
Experimental

Legend

Tip: you can click/tap on a cell for more information.

In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

See also

  • The HTML element implementing this interface: <dialog>.