Exhibit 03 of 17
A modal with no script
Two boxes that open over the page. The first uses the popover attribute; the second, the older :target trick.
The exhibit
With popover
The button names its popover; the browser opens it on top of everything and closes it with Esc or a click outside.
Order form
One small impossible thing, made to order. Whether anyone has ever posted this form is not on record.
With :target
A link to #notice makes the notice the page’s target, and CSS shows it. Closing is a link to somewhere else.
How it works
popover: the button’s popovertarget names the box. The browser opens it in the top layer above everything, closes it on Esc or a click outside, and puts focus back on the button. CSS only styles the box and its ::backdrop.
:target: the link goes to #notice, which makes the notice the page’s target, and .target-box:target shows it. The Close link goes to a different fragment. It is how people did this before popover.
The key CSS
Cut from this exhibit’s stylesheet as it is served.
/* popover: hidden until its button opens it; the browser puts it in the top layer */
.x-modal [popover] { margin: auto; inset: 0; height: max-content; }
.x-modal [popover]::backdrop { background: rgb(23 24 21 / .55); }
/* :target: the box is hidden until the URL's #fragment names it */
.x-modal .target-box { display: none; }
.x-modal .target-box:target {
display: block; position: fixed; inset: 0; z-index: 20; margin: auto; height: max-content;
outline: 100vmax solid rgb(23 24 21 / .55); /* a backdrop without an extra element */
}Accessibility
The popover is decent: Esc works, focus returns, it is announced. It is not truly modal, though: the page behind stays reachable by Tab. A real modal (<dialog> opened with showModal(), or with the newer command="show-modal" buttons) makes the rest inert.
The :target version is worse than a script in several ways: Esc doesn’t close it, focus isn’t moved into it or trapped, the page behind is fully live, every open and close adds a history entry, and the page may jump to the box. Use it only where nothing better exists.
Browser support
popoverWorks in this browser.Not in this browser: The button does nothing; the :target version beside it still works. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.:targetWorks in this browser.Not in this browser: Universal. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.