HTMLDialogElement.showModal()
The showModal()
method of the
HTMLDialogElement
interface displays the dialog as a modal, over the top
of any other dialogs that might be present. It displays into the top layer, along with a
::backdrop
pseudo-element. Interaction outside the dialog is blocked and
the content outside it is rendered inert.
Syntax
showModal()
Parameters
None.
Return value
None (undefined
).
Exceptions
InvalidStateError
DOMException
-
Thrown if the dialog is already open (i.e. if the
open
attribute is already set on the<dialog>
element).
Examples
Opening a modal dialog
The following example shows a button that, when clicked, opens a modal <dialog>
containing a form via the HTMLDialogElement.showModal()
function. While open, everything other than the modal dialog's contents is inert. From there you can click the Cancel button to close the dialog (via the HTMLDialogElement.close()
function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a close
event, not a cancel
event.
HTML
<!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<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>
<div>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</div>
</form>
</dialog>
<div>
<button id="updateDetails">Update details</button>
</div>
JavaScript
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
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 cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
dialog.close("animalNotChosen");
openCheck(dialog);
});
Result
Specifications
Specification |
---|
HTML Standard # dom-dialog-showmodal-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The HTML element implementing this interface:
<dialog>
.