HTMLDialogElement: close() method

Syntax

close() close(returnValue)

Parameters

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

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 close the dialog (via the HTMLDialogElement.close() 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 type="button" id="close" aria-label="close">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> <li> <button type="reset">Reset</button> </li> <li> <button type="submit">Confirm</button> </li> </menu> </form> </dialog> <button id="updateDetails">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 dialog updateButton.addEventListener("click", () => { dialog.showModal(); openCheck(dialog); }); // Form close button closes the dialog box closeButton.addEventListener("click", () => { dialog.close("animalNotChosen"); openCheck(dialog); });

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.