HTMLDialogElement: show() 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 show() method of the HTMLDialogElement interface displays the dialog modelessly, i.e., still allowing interaction with content outside of the dialog.
Syntax
js
show()
Parameters
None.
Return value
None (undefined).
Exceptions
InvalidStateErrorDOMException-
Thrown if the dialog is already open and modal (i.e., if the dialog has already been opened with
HTMLDialogElement.showModal()).
Examples
Basic usage
The following example shows a simple button that, when clicked, opens a <dialog> containing a form via the show() method.
From there you can click the Cancel button ("X") to close the dialog (via the HTMLDialogElement.close() method), or submit the form via the submit button.
HTML
html
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<button type="button" id="cancel">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>
JavaScript
js
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 cancelled");
}
}
// Update button opens a modeless dialog
updateButton.addEventListener("click", () => {
dialog.show();
openCheck(dialog);
});
// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
dialog.close("animalNotChosen");
openCheck(dialog);
});
Results
Specifications
| Specification |
|---|
| HTML # dom-dialog-show-dev |
Browser compatibility
See also
- The HTML element implementing this interface:
<dialog>.