HTMLDialogElement: closedBy property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The closedBy property of the HTMLDialogElement interface indicates the types of user actions that can be used to close the associated <dialog> element. It sets or returns the dialog's closedby attribute value.

Value

A string; possible values are:

any

The dialog can be dismissed with a light dismiss user action, a platform-specific user action, or a developer-specified mechanism.

closerequest

The dialog can be dismissed with a platform-specific user action or a developer-specified mechanism.

none

The dialog can only be dismissed with a developer-specified mechanism.

Default behavior

If the closedby attribute is absent or invalid, it falls back to the Auto state. In the Auto state:

when the <dialog> is opened with showModal(), it behaves as if: closedby="closerequest"
when the <dialog> is opened by any other means, it behaves as if: closedby="none"

Examples

Basic closedBy usage

html
<dialog closedby="any">
  <p>
    Closable using the <kbd>Esc</kbd> key, or by clicking outside the dialog
    ("light dismiss").
  </p>
</dialog>

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

js
const dialog = document.querySelector("dialog");
dialog.showModal();
log(`closedBy: ${dialog.closedBy}`);

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Jan 28, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLDialogElement: closedBy property

In this article

Value

Default behavior

Examples

Basic closedBy usage

Result

Specifications

Browser compatibility

See also

Help improve MDN