jQuery的。单击元素与元素背后的堆叠错误？

Question

I have a 'lightbox' similar function which simply brings up 2 divs like this:

The green color (wont be colored in once it works) is the area to click to close the login box.

jsFiddle with code: http://jsfiddle.net/bhcGv/8/

When you click on the login box it will disappear as it thinks its clicking on the green box. Any suggestions?

Answer 1

you need .stopPropagation method.

here the updated jsfidle: http://jsfiddle.net/bhcGv/10/

Answer 2

you could add this code

.find('#centeredBox').click(function(e){
        e.preventDefault();
        e.stopPropagation();
return false;
    });

so your document.ready function becomes

$(document).ready(function(){
    $("#loginOffBox").click(function(){
        $('#loginOffBox').hide();
          $('#centeredBox').hide();
    }).find('#centeredBox').click(function(e){
        e.preventDefault();
        e.stopPropagation();
return false;
    });
    // other js
});

this should stop the event from being run when you click on the centered div.

You could also take the centered div out of the colored one too. then you wont have the event bubbles.

Answer 3

You want to fix the z-index of the two divs. Background div should have a smaller z-index than the popup div and both should have a relatively high value.

Try z-index of 1000 for loginOffBox and 1100 for centeredBox and it should work fine.