Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/requestClose below:

HTMLDialogElement: requestClose() method - Web APIs

Baseline 2025

Newly available

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 in that it fires a cancel event before firing the close event. Authors can call Event.preventDefault() in the handler for the cancel event to prevent the dialog from closing.

This method exposes the same behavior as the dialog's internal close watcher.

requestClose()
requestClose(returnValue)

returnValue Optional

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

None (undefined).

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

<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <button type="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>

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 allow the dialog to close.
  // Closing prevented by default
  return true;
}

dialog.addEventListener("cancel", (event) => {
  if (!event.cancelable) return;
  if (dialogShouldNotClose()) {
    console.log("Closing prevented");
    event.preventDefault();
  }
});

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.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4