Html Question posted in
Some basic documentation can be found here.

Html – How to stop mouse events through CSS ::backdrop

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?

Tags:

2

Answers


  1. 0

    Maybe this is a dirty option, but you can close the space with other elements in popover:

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

#mypopover {
  overflow: visible;
  i {
    position: absolute;
    &:first-child {
      inset: -100vmax -100vmax 100%;
    }
    &:last-child {
      inset: 100% -100vmax -100vmax;
    }
  }
  &:before,
  &:after {
    content: '';
    position: absolute;
  }
  &:before {
    inset: 0 100% 0 -100vmax;
  }
  &:after {
    inset: 0 -100vmax 0 100%;
  }
}
    <button popovertarget="mypopover" popovertargetaction="show">
  Show popover
</button>
<div id="mypopover" popover><i></i>Popover content<i></i></div>

<a href="https://google.com"/>Links</a>
    Login or Signup to reply.
  2. 0

    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 */
#mypopover :is(button, a) {
  pointer-events: auto;
}
    <button popovertarget="mypopover" popovertargetaction="show">
      Show popover
    </button>
<div id="mypopover" popover>Popover content <a href="#">link in popover</a></div>

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

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search