I have some normal content. Then i made another div that is going to be over everything, triggered with a button.
This div is with position absolute, background color: rgba, so it can be transparent.
When the div is displayed, the user shouldn’t be able to click anything underneath it, ONLY one button (the one just mentioned).
I can’t manage to achieve that, if I use pointer-events, it gives click access to everything under it.
I just want the button in the bottom div to be clickable when the div is on.
Thanks a lot.!
If you only want one button to be clickable with the overlay active, why not just make that button the only thing above the overlay?
You could then you jquery to modify the css of the given objects. If the overlay is active z-index the button to the top. If it is inactive, return the button to its normal state and hide the overlay. If you really want the button to look like it is under the overlay, you could even set a style to make it look faded (either via CSS opacity, or an alternative image)
http://jsfiddle.net/ckaufman/b6gza/