Newly available Useful in modern browsers, but confirm support before making it a core requirement.

dialog.requestClose()

The requestClose() method of the HTMLDialogElement interface requests to close the <dialog>. An optional string may be passed as an argument, updating the returnValue of the dialog.

This method differs from close() in that it fires a cancel event before firing the close event. Authors can call Event.preventDefault() in the handler for the cancel event to prevent the dialog from closing.

This method exposes the same behavior as the dialog's internal close watcher.

Text and structureInteraction

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLDialogElement.requestClose
134
134
139
18.4
134
18.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
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.

PreviewFullscreen

Intercept the cancel path

Listen for the cancel event before allowing the close request to complete.

PreviewFullscreen

Request close result

Show the dialog returnValue after a scripted close request completes.

PreviewFullscreen

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