Offscreen Content - Add Backdrop

Use ::backdrop via CSS to create a native visual layer between your offscreen content element and the page, no JS required.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

HTML

<!-- `popovertarget="related"` on the `button` connects to `id="related"` on the `aside` -->
<button popovertarget="related">
  Related Content
</button></p>
<aside popover="manual" id="related">
  <p>This is the related content.</p>
  <p>It requires an explicit close action.</p>
  <p>Click either the same "Related Content" button or the "Close Related Content" button below, to close it.</p>
  <button popovertarget="related" popovertargetaction="hide">×</button>
</aside>

CSS

aside::backdrop {
  background-color: rgb(0 0 0 / .5);
}

JS

No JS required.

Baseline

[`backdrop`](https://webstatus.dev/features/backdrop)

CodePen

See the Pen on CodePen.