<dialog closedby>
The closedby HTML attribute for <dialog> sets which user actions close a dialog. For example, closedby="any" allows the dialog to be closed by clicking outside of it. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The closedby HTML attribute for <dialog> sets which user actions close a dialog. For example, closedby="any" allows the dialog to be closed by clicking outside of it. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 134 | 134 | 141 | | 134 | | |
| HTML attribute | ||||||
closedby | 134 | 134 | 141 | | 134 | |
Syntax
<!-- 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.
Guarded action dialog
Show a dialog that only closes from the explicit action button in the demo.
Closedby quick guide
Summarize the intent of the different close policies in one table.
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.
Related links
Powered by web-features