How to make underlying div unclickable?

Question

I made overlay div with:

position: absolute; top: 0; left: 0; widht: 100%; height: 100%;

Basically I want this overlay div to cover my whole page. And it does what I need, but I also need underlying divs to be unclickable. They are indeed unclickable but only in FF, Safari and Chrome. in IE and Opera you can still click buttons that are underneath.

Does anyone have any idea on how can I achieve this "unclickable underlying behaviour"?

Answer 1

Have a look at How do i make an area unclickable with CSS?

Answer 2

Add an onclick handler for the overlay div.

Answer 3

You also need to use z-index to ensure that your new div is on top of everything else. Without this attribute you are at the mercy of the browser in terms which one will be on top and receive the onclick

Also be aware of a known IE (older versions) bug that input type selection ignores z-index

Answer 4

If you're using something like jQuery, you can do something like

$("a:not(.overlay)").click(function(e) { e.preventDefault(); });
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); });

You'll give everything in your overlay (links, buttons, etc.) the overlay class, and this will effectively disable everything else on your page.