HTMLDialogElement: open property

{{ APIRef("HTML DOM") }}

The open property of the {{domxref("HTMLDialogElement")}} interface is a boolean value reflecting the open HTML attribute, indicating whether the {{htmlelement("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 {{htmlelement("dialog")}} containing a form via the showModal() method. From there you can click the Cancel button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} method), or submit the form via the submit button.

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

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);
});

Result

{{ EmbedLiveSample('Opening a dialog', '100%', '250px') }}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• HTML {{htmlelement("dialog")}} element