Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML dialog closedby: choose whether outside clicks dismiss a panel

Last updated: 5 Oct 20266 min read
tutorial
IntermediateBy AITrove Editorial

The closedby attribute sets which user dismissal actions close a dialog. In particular, any permits both close requests and outside clicks; closerequest allows close requests without outside-click dismissal; none disables automatic user dismissal.

Choose the contract

A short reference note can safely disappear when the reviewer clicks outside it. That makes any a sensible choice, provided the note has an obvious close button as well. The same setting would be risky on an edit form containing unsaved evidence, because an incidental click could discard work. The attribute does not turn a dialog modal; how the dialog is opened still controls modality. It also does not change a server record. The example opens the note as a modal with a named button. Test keyboard close, pointer dismissal, and focus return in each target browser, since support for this newer attribute can differ from support for dialog itself.

html
<button type="button" commandfor="bay-note" command="show-modal">
  Read bay note
</button>
<dialog id="bay-note" closedby="any" aria-labelledby="bay-note-title">
  <h2 id="bay-note-title">Bay C-47 note</h2>
  <p>Place sealed parcels on the upper shelf only.</p>
  <button type="button" commandfor="bay-note" command="request-close">
    Close note
  </button>
</dialog>

Cost and verification

This costs no application script when the browser supports both dialog commands and closedby. A fallback for unsupported browsers must be tested rather than assumed. If the panel later gains editable fields, revisit the dismissal policy and provide a save or discard path before keeping any. Do not manually remove the open attribute to imitate closing: that bypasses normal close behavior and can leave modal state inconsistent. The visible close control remains important even when light dismissal works.

Common Mistakes

  • Do not put unsaved form data in a dialog that light-dismisses without a recovery path.
  • Do not assume closedby alone opens the dialog.
  • Do not remove open directly as a substitute for a close operation.

Connected lessons

html
browser-contract
Storage details