HTMLDialogElement: closedBy property

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

undefined

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>

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

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

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

Result

Specifications

HTML