I created several “simulated overlay” menus and would like the option to prevent accidental clicks on content behind the layer. From a UX perspective, I’d like a checkbox option that says “ignore all interactions behind this layer” when the layer is visible.
In my case, I am creating a pseudo overlay experience using my own hack method. You create a modal (for example) on a components page. You put an instance of the modal on another page (separation of concerns from components and prototype pages). You then toggle the visibility of the modal instance on the prototype page where necessary. For example, a command menu that is displayed on button click.
Why do it this way? Because the default modal/overlay experience is bad. They lack responsive design support, they have to be attached to every component instance on within a page (rather than just on the master component), and they can be buggy from time to time.
There are other cases I would also like pointer events turned off, similar to how a real product would function. In other words, provide an option to prevent triggering events behind a layer, regardless of the reason you are doing this in the UI.