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 by a close request or clicks outside the dialog.
closerequest-
The dialog can only be dismissed by a close request.
none-
No user actions automatically close the dialog. The dialog can only be dismissed with a developer-specified mechanism.
Default behaviour
If the closedby attribute is absent or invalid, it falls back to the Auto state. In the Auto state:
- when the
<dialog>is opened withshowModal(), 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 open closedby="any">
<h2>My dialog</h2>
<p>
Closable using the <kbd>Esc</kbd> key, or by clicking outside the dialog.
"Light dismiss" behavior.
</p>
</dialog>
js
const dialog = document.querySelector("dialog");
// Logs "any" to the console
console.log(dialogElem.closedBy);
Specifications
| Specification |
|---|
| HTML # dom-dialog-closedby |