<dialog closedby>
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 134 | 134 | 141 | | 134 | | |
| HTML attribute | ||||||
closedby | 134 | 134 | 141 | | 134 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
HTML
<!-- ESCキーや外部クリックで閉じない -->
<dialog closedby="none" id="important">
<p>Important Message</p>
<button onclick="this.closest('dialog').close()">OK</button>
</dialog>Live demo
Dialog close sources
Compare dialog markup that declares which actions are allowed to close it.
PreviewFullscreen
Guarded action dialog
Show a dialog that only closes from the explicit action button in the demo.
PreviewFullscreen
Closedby quick guide
Summarize the intent of the different close policies in one table.
PreviewFullscreen
Use cases
-
Strengthen structure
Use <dialog closedby> to make the document outline, grouping, or semantics more explicit.
-
Improve meaning
Apply <dialog closedby> when clearer HTML structure helps users and tools understand the content.
Cautions
- Test <dialog closedby> in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Prefer semantic structure that improves navigation and interpretation for assistive technologies, not just visual organization.