HTMLDialogElement: open property
Baseline 2022
Newly available
Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The open
property of the
HTMLDialogElement
interface is a boolean value reflecting the
open
HTML attribute, indicating whether the <dialog>
is
available for interaction.
Value
A boolean value representing the state of the open
HTML attribute. true
means it is set, and therefore the dialog
is shown. false
means it not set, and therefore the dialog is not shown.
The property is not read only — it is possible to set the value to programmatically show or hide the dialog.
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 Cancel button to close the dialog (via the
HTMLDialogElement.close()
method), or submit the form via the submit
button.
<!-- Simple pop-up dialog box -->
<dialog id="dialog">
<form method="dialog">
<button type="submit">Close</button>
</form>
</dialog>
<p>
<button id="openDialog">Open Dialog</button>
</p>
<p id="dialogStatus"></p>
<script>
(() => {
const openDialog = document.getElementById("openDialog");
const dialog = document.getElementById("dialog");
const text = document.getElementById("dialogStatus");
function openCheck(dialog) {
if (dialog.open) {
text.innerText = "Dialog open";
} else {
text.innerText = "Dialog closed";
}
}
// Update button opens a modal dialog
openDialog.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
dialog.addEventListener("close", () => {
openCheck(dialog);
});
})();
</script>
Result
Specifications
Specification |
---|
HTML Standard # dom-dialog-open |
Browser compatibility
BCD tables only load in the browser
See also
- The HTML element implementing this interface:
<dialog>
.