Question 45956 in CSS Question posted in
Some basic documentation can be found here.

How to prevent user from interacting with web page via extension? – CSS

I’m creating an extension that is supposed to show an overlay and highlight the element the cursor is on. When the overlay is visible, the user should not be able to interact with the page (buttons, links etc should not work).

The code:

let overlay = document.createElement("div");
overlay.setAttribute("class", "as-overlay");

let panel = document.createElement("div");
panel.setAttribute("class", "as-root");
panel.setAttribute("id", "as-panel");
overlay.appendChild(panel);
document.body.appendChild(overlay);

____

.as-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom:0px;
  z-index: 99999;
  cursor: default;
  pointer-events: none !important;
  background-color: rgba(0, 0, 0, 0.8);
}

I’m setting pointer-events to none in order to disable interactions. But it isn’t working. Am I doing something wrong? (I’ve ensured the overlay takes full width and height, and it’s z-index is high enough so that it renders on top of everything.)

Some help would be appreciated, I’ve been banging my head on this for quite a while, and a certain large language model was of no help ;-;

Edit: I’ve added in an example. Ideally, you’d expect clicking on the button or link to not do anything, since the overlay is there. But clicking on them works, I just can’t seem to understand why.

Tags:

2

Answers


  1. 0

    For starters, these two have to be switched over because you can’t have "panel" placed without the "overlay" being in place. Even if JS allows you to do this, it’s pretty illogical and hurts my brain!

    overlay.appendChild(panel);
document.body.appendChild(overlay);

    But anyway, if you have covered the entire page with a "shroud" then who cares about pointer events? 🙂

    They’ll be clicking your shroud so if you haven’t added a click event on it… what exactly is the problem?

    Login or Signup to reply.
  2. 0

    From the description of pointer-events

    In addition to indicating that the element is not the target of
    pointer events, the value none instructs the pointer event to go
    "through" the element and target whatever is "underneath" that element
    instead.

    All you need to do is remove pointer-events: none and that should fix your problem. At least it fixes the example you provided.

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

Back To Top
Search