demo · v135

Modal opens, page below freezes

The motivating use case for interactivity: inert in the spec is "lock everything behind a modal." Pick a strategy below: the legacy inert attribute set by script, or the new CSS-only approach that reacts to :has(:popover-open) or any state class. Tab and click around — only the foreground stays alive.

interactivity: ?

article behind the modal

Tab from the very top of the page. Without inert, focus walks into the inputs below before reaching the modal.

a link

the code

/* No JS. The dialog opens, :has() flips a class, and the body freezes. */
body:has(dialog[open]) main {
  interactivity: inert;
}

see also