demo · v133

closedby matrix — modal vs non-modal vs popover

Each value of closedby behaves slightly differently depending on whether the dialog is opened with show(), showModal(), or compared with a popover. Click into each combination and watch what dismisses (and what doesn't).

openerclosedby="none"closedby="closerequest"closedby="any"
showModal()
show() (non-modal)

Esc and outside-click behaviours summarised in the dialog you opened.

showModal() · closedby="none"

Esc: ignored · Outside click: ignored

showModal() · closedby="closerequest"

Esc: closes · Outside click: ignored

showModal() · closedby="any"

Esc: closes · Backdrop click: closes

show() · closedby="none"

Esc: ignored · Outside click: ignored

show() · closedby="closerequest"

Esc: closes · Outside click: ignored

show() · closedby="any"

Esc: closes · Outside click: closes

why this matters

The previous workarounds for "dismiss on outside click" involved a click listener on the document, computing whether the event target was inside the dialog, and calling .close(). That worked for modals but interfered with non-modal dialogs (the backdrop doesn't exist), and conflicted with preventDefault on inner content. closedby moves the policy into the platform and gives consistent behaviour across the two open modes — including the non-modal show() case the original Popover API discussion was missing.

see also