dialog versus popover: modal behaviour, the top layer and light dismiss

What it is

Two native primitives for content that floats above the page. A <dialog> opened with showModal() is modal: it is promoted to the top layer (above every stacking context), the rest of the document becomes inert, focus moves inside, ::backdrop covers the page, and Escape issues a close request. show() opens it non-modally in place. The closedby attribute selects how it may be dismissed: any (a click outside, Escape or code), closerequest (Escape or code; MDN states this is the default for showModal()) or none. A <form method="dialog"> closes the dialog on submit without a request and sets returnValue to the submitting button's value. The popover attribute makes any element a non-modal top-layer overlay toggled by <button popovertarget="id"> with no script; MDN describes popover="auto" as light dismissed by clicking outside and closed by Escape, with only one auto popover open at a time, while manual stays until closed explicitly and hint serves tooltips.

Why it matters

Menus, toasts, tooltips and modals used to need a z-index fight, a hand-written focus trap and a click-outside handler. The native versions handle stacking, dismissal and, for modal dialogs, inertness in the browser, toggle without JavaScript, and expose the right role to assistive technology.

How to apply

• Blocking prompts, confirmations, editing forms: <dialog> plus showModal(), with autofocus on the first useful control and a visible close button.
• Non-blocking menus, panels, tooltips, toasts: popover; menus as auto, toasts as manual.
• Do not use the open attribute for a modal (a dialog opened that way is non-modal) and do not put tabindex on the <dialog> element itself; MDN warns it is not interactive.
• Return data through returnValue and the close event rather than shared mutable state.
• Style ::backdrop; both elements are display: none until shown, so entry transitions need a starting style.

Pitfalls

Light dismiss (closedby="any") on a dialog with a half-filled form throws the input away; prefer closerequest there. Popovers are not modal: they neither trap focus nor make the page inert. MDN notes a successful showModal() dismisses open auto popovers. Focus returns to the invoker on close only if the invoker still exists; the focus-management article covers the rest.