NoLoJS logo

Modal/Popover - Add Backdrop

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

Demo

I'm a Popover with a ::backdrop!

The ::backdrop can be added to any popover type, and can be styled using CSS.

Opening a popover automatically displays the ::backdrop, and places it between the popover and the content (no z-index required!).

Closing the popover will automatically close the ::backdrop.

HTML

<!-- `popovertarget="pop-backdrop"` on the `button` connects to `id="pop-backdrop"` on the `dialog` -->
<button popovertarget="pop-backdrop">
   Toggle Popover with <code>::backdrop</code>
</button>
<dialog popover id="pop-backdrop">
  <h2>I'm a Popover with a <code>::backdrop</code>!</h2>
  <p>The <code>::backdrop</code> can be added to any popover type, and can be styled using CSS.</p>
  <p>Opening a popover automatically displays the <code>::backdrop</code>, and places it between the popover and the content (no <code>z-index</code> required!).</p>
  <p>Closing the popover will automatically close the <code>::backdrop</code>.</p>
</dialog>

CSS

dialog::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.