How to make underlying div unclickable?

A

6

10

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"?

Alleviative answered 12/12, 2009 at 21:14 Comment(0)

V

21

.class {pointer-events: none;}

Valse answered 9/1, 2014 at 11:49 Comment(1)

This doesn't work in < IE11, and even in IE11 does not work on links (caniuse.com/#feat=pointer-events) – Fingerling 19/5, 2015 at 17:55

F

1

Add an onclick handler for the overlay div.

Fidelity answered 12/12, 2009 at 21:23 Comment(0)

L

1

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

Livelihood answered 12/12, 2009 at 21:33 Comment(0)

B

1

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.

Briareus answered 12/12, 2009 at 21:37 Comment(0)

B

1

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/

Boathouse answered 7/1, 2013 at 12:7 Comment(0)

A

0

Tthe overlay CSS with:

z-index: 10000;

will take care of it.

Avery answered 20/9, 2012 at 5:43 Comment(0)

Recommended topics

Hot tags