I'm trying to make a notification system where a small box appears in the top right corner of the screen.
However, I want the part of the screen that is under the notification to be clickable. As it is now, when the notification is there, you can't interact with what's under it. How can I make the area under it clickable? I've tried messing around with the z-index, position, and transform properties, but they still make the notification appear on top of the other content.
Asked
Active
Viewed 597 times
3
yaakov
- 4,568
- 4
- 27
- 51
-
share your code, don't be shy – Kristijan Iliev Nov 20 '16 at 17:34
-
It's based off of the [Metro UI framework](http://metroui.org.au), so I don't really have the code. – yaakov Nov 20 '16 at 17:35
1 Answers
3
Use pointer-events: none on the popup box to allow clicks and cursor interactions to pass through it.
Note that this is not supported by IE10 or under, but that makes up a very small percentage of users.
Jon Uleis
- 17,693
- 2
- 33
- 42