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.
The close()
method of the HTMLDialogElement
interface closes the <dialog>
.
An optional string may be passed as an argument, updating the returnValue
of the dialog.
Syntax
close()
close(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 close the dialog (via the HTMLDialogElement.close()
method), or submit the form via the submit button.
<!-- 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");
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);
});
})();
</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 Standard # dom-dialog-close-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The HTML element implementing this interface:
<dialog>
.