HTMLDialogElement: showModal() 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.
TheshowModal() method of theHTMLDialogElement interface displays the dialog as a modal, over the topof any other dialogs that might be present. It displays in thetop layer, along with a::backdrop pseudo-element. Elements inside the same document as the dialog, except the dialog and its descendants, becomeinert (as if theinert attribute is specified). Only the containing document becomes blocked; if the dialog is rendered inside an iframe, the rest of the page remains interactive.
Syntax
showModal()Parameters
None.
Return value
None (undefined).
Exceptions
InvalidStateErrorDOMExceptionThrown if the dialog is already open and non-modal (i.e., if the dialog has already been opened with
HTMLDialogElement.show()).
Examples
Opening a modal dialog
The following example shows a button that, when clicked, opens a modal<dialog> containing a form via theHTMLDialogElement.showModal() function. While open, everything other than the modal dialog's contents is inert. From there you can click theCancel button to close the dialog (via theHTMLDialogElement.close() function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating aclose event, not acancel event.
HTML
<!-- pop-up dialog box, containing a form --><dialog> <form method="dialog"> <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> <div> <button type="reset">Cancel</button> <button type="submit">Confirm</button> </div> </form></dialog><div> <button>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 dialogupdateButton.addEventListener("click", () => { dialog.showModal(); openCheck(dialog);});// Form cancel button closes the dialog boxcancelButton.addEventListener("click", () => { dialog.close("animalNotChosen"); openCheck(dialog);});Result
Specifications
| Specification |
|---|
| HTML # dom-dialog-showmodal-dev |
Browser compatibility
See also
- The HTML element implementing this interface:
<dialog>.