HTMLDialogElement: close() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2022⁩.

Theclose() method of theHTMLDialogElement interface closes the<dialog>.An optional string may be passed as an argument, updating thereturnValue of the dialog.

Syntax

close()close(returnValue)

Parameters

returnValueOptional: A string representing an updated value for theHTMLDialogElement.returnValue of the dialog.

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

html

<!-- Simple pop-up dialog box, containing a form --><dialog>  <form method="dialog">    <button type="button" aria-label="close">X</button>    <section>      <p>        <label for="favAnimal">Favorite animal:</label>        <select name="favAnimal">          <option></option>          <option>Brine shrimp</option>          <option>Red panda</option>          <option>Spider monkey</option>        </select>      </p>    </section>    <menu>      <li>        <button type="reset">Reset</button>      </li>      <li>        <button type="submit">Confirm</button>      </li>    </menu>  </form></dialog><button>Update details</button>

const updateButton = document.getElementById("updateDetails");const closeButton = document.getElementById("close");const dialog = document.getElementById("favDialog");dialog.returnValue = "favAnimal";function openCheck(dialog) {  if (dialog.open) {    console.log("Dialog open");  } else {    console.log("Dialog closed");  }}// Update button opens a modal dialogupdateButton.addEventListener("click", () => {  dialog.showModal();  openCheck(dialog);});// Form close button closes the dialog boxcloseButton.addEventListener("click", () => {  dialog.close("animalNotChosen");  openCheck(dialog);});

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