如何使底层元素不可点击/无效？

Question

I have two elements on top of each other. When I click a button on the first div, the second div opens on top of the first div, and what I want to do is to make the underlaying div non-interactive (That I can't click on anything on the underlaying-div as long as the overlaying-div is open).

Javascript code:

  $('#button').live('click', function()
  {    
      $('#underlaying-div).fadeTo("fast", 0.7);
      $('#overlaying-div).css('display', 'block');

      //Do something here to make the underlaying div unclickable
  });

  $("#overlaying-div").live("click", function() {
     $(this).hide();

     $('#underlaying-div).fadeTo("slow", 1.0);

     //Do something here to make the underlaying div clickable again
  });

CSS-code:

 #overlay-div
 {
    position:absolute;
    left:0;
    top:0;
    display:none;
    z-index: 20000;    
 }

I know I can use event.preventDefault() to make sure nothing happens if you click on an element in the underlaying-div, but I'd rather want that nothing happens at all when you for instance hover over an button (with preventDefault(), hover and other stuff still happens).

Any other ways in CSS or javascript/JQuery that can fix this problem??

Answer 1

Not sure of your final product, but if the underlaying div get overlapped by the overlaying in a way that the underlaying div is not visible anymore you could just display:block; the underlaying div.

Answer 2

This is a very old question, but if someone happens upon it, you might find it useful to toggle the pointer-events CSS property of the object you want to disable. You won't need to manually remove click bindings or add any other wrappers. If an object has pointer-events set to 'none', no events will fire when it is clicked.

In jQuery:

$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable

Answer 3

You could use unbind to remove the click event handler like this:

$(this).unbind('click'):

My concern is if this works with a live bind but you should at least try it :)

Answer 4

Why don't you use jQuery .fadeIn() and .fadeOut() functions? You have two divs with id="div1" and id="div2" and you have a button in div1 with id="button1" and a button in div2 with id="button2" . CSS code:

#div1 {
   //some CSS code without z-index
}

#div2 {
   //some CSS code without z-index
   visibility:hidden;
}

jQuery code:

$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})