Baseline Widely available
The open property of the HTMLDialogElement interface is a boolean value reflecting the open HTML attribute, indicating whether the <dialog> is available for interaction.
A boolean value representing the state of the open HTML attribute. A value of true means that the dialog is showing, while false means it's not showing.
Warning: While the open property is technically not read-only and can be set directly, doing so is strongly discouraged by the HTML specification, as it can break normal dialog interactions in unexpected ways. For example, the close event won't fire when programmatically setting open to false, and subsequent calls to the close() and requestClose() methods will have no effect. Instead, it's better to use methods such as show(), showModal(), close(), and requestClose() to change the value of the open attribute.
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>
<dialog>.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3