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

.class {pointer-events: none;}

Answer 2

This can easily be done using javascript:

• Create a div masking the entire page with a high z-index
• Make the mask catch all clicks
• When removing the mask, the page becomes clickable again.

This approach can of course be used on all dom elements, not just the body.

var mask = $('<div></div>')
  .css({
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    'z-index': 10000
  })
  .appendTo(document.body)
  .click(function(event){
    event.preventDefault();
    return false;
   })

Working sample here: http://jsfiddle.net/GTPW3/3/

Answer 3

Add an onclick handler for the overlay div.

Answer 4

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 5

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.

Answer 6

Tthe overlay CSS with:

z-index: 10000;

will take care of it.