HTMLDialogElement: open property

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 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. 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.

Examples

Opening a dialog

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.

The code logs the value of open when the dialog state changes.

HTML

html

<!-- Simple pop-up dialog box -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>

<button id="open">Open Dialog</button>

<pre id="log"></pre>

#log {
  height: 170px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");

function openCheck(dialog) {
  log(dialog.open ? "Dialog: open" : "Dialog: closed");
}

openButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

dialog.addEventListener("close", () => {
  openCheck(dialog);
});