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
show()
Parameters
None.
Return value
None (undefined
).
Exceptions
InvalidStateError
DOMException
-
Thrown if the dialog is already open and modal (i.e. if the dialog has already been opened with
HTMLDialogElement.showModal()
).
Examples
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 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">
<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 id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
<script>
(() => {
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 modeless dialog
updateButton.addEventListener("click", () => {
dialog.show();
openCheck(dialog);
});
// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
dialog.close("animalNotChosen");
openCheck(dialog);
});
})();
</script>
Specifications
Specification |
---|
HTML # dom-dialog-show-dev |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
show |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- The HTML element implementing this interface:
<dialog>
.