dialog.requestClose()
The requestClose() method of a <dialog> HTML element closes the dialog, firing a cancel event first, which listeners can use to prevent the dialog from closing. This differs from the close() method, which only fires the non-cancelable close event. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The requestClose() method of a <dialog> HTML element closes the dialog, firing a cancel event first, which listeners can use to prevent the dialog from closing. This differs from the close() method, which only fires the non-cancelable close event. 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 | 139 | 18.4 | 134 | 18.4 | |
Syntax
const dialog = document.getElementById('myDialog');
// Close request that can be canceled
dialog.addEventListener('cancel', (e) => {
if (!confirm('Are you sure you want to close this?'')) e.preventDefault();
});
dialog.requestClose();Live demo
Basic request close
Call requestClose on a dialog and fall back to close when the method is unavailable.
Intercept the cancel path
Listen for the cancel event before allowing the close request to complete.
Request close result
Show the dialog returnValue after a scripted close request completes.
Use cases
Strengthen structure
Use dialog.requestClose() to make the document outline, grouping, or semantics more explicit.
Improve meaning
Apply dialog.requestClose() when clearer HTML structure helps users and tools understand the content.
Cautions
- Test dialog.requestClose() 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