How to stop mouse events through CSS ::backdrop

Question

I'm exploring replacing some JavaScript modals with native HTML and CSS only modals using the new Popover API and I've noticed that pointer-events like hover and click are propagating through to the underlying layer.

::backdrop {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: grayscale(40%) blur(3px);
}

    <button popovertarget="mypopover" popovertargetaction="show">
      Show popover
    </button>
    <div id="mypopover" popover>Popover content</div>
    
    <a href="https://google.com"/>Links</a>

How can I prevent clicks propagating to underlying layer elements when the ::backdrop is being shown? I've attempted pointer-events: none but seen no success.

If it's not currently possible, are there browser bugs to follow for tracking this functionality?

Answer 1

You may also try to filter popover-open and reset pointer-events on a few elements :

CSS idea is:

::backdrop {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: grayscale(40%) blur(3px);
}

/* filter element not supposed to catch mouse events */
body:has(:popover-open) :is(button, a) {
  pointer-events: none;
}

/* then allow click from #mypopover */
div[popover] :is(button, a) {
  pointer-events: auto;
}

<button popovertarget="mypopover" popovertargetaction="show">
      Show popover
    </button>
<div id="mypopover" popover>Popover content <a href="https://codepen.io">link in popover</a>
  <p style="color:red;text-align:center">Click anywhere outside this box <br>to close the popup</p>
</div>

<a href="https://google.com" />Links</a>

<!-- fake content -->
<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>

<h3>Header Level 3</h3>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
                #header h1 a {
                  display: block;
                  width: 300px;
                  height: 80px;
                }
                </code></pre>

Look at https://developer.mozilla.org/en-US/docs/Web/CSS/:popover-open to find your own use

caniuse ? https://caniuse.com/?search=%3Apopover-open