CODEWITHSUNDEEP
csshtmloverlayclickable
Goran
Goran

Reputation: 1837

How to make underlying div unclickable?

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

Upvotes: 10

Views: 27515

Answers (6)

Kadae
Kadae

Reputation: 330

.class {pointer-events: none;}

Upvotes: 21

Lasse Skindstad Ebert
Lasse Skindstad Ebert

Reputation: 3390

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/

Upvotes: 1

Nidhin Bose J.
Nidhin Bose J.

Reputation: 1092

Tthe overlay CSS with:

z-index: 10000;

will take care of it.

Upvotes: 0

Jarrett Meyer
Jarrett Meyer

Reputation: 19583

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.

Upvotes: 1

mfeingold
mfeingold

Reputation: 7152

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

Upvotes: 1

clorz
clorz

Reputation: 1133

Add an onclick handler for the overlay div.

Upvotes: 1

Related Questions