HTMLDialogElement: closedBy property

{{ APIRef("HTML DOM") }}

The closedBy property of the {{domxref("HTMLDialogElement")}} interface indicates the types of user actions that can be used to close the associated {{htmlelement("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

<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

{{ EmbedLiveSample('Basic closedBy usage', '100%', '250px') }}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

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