jQuery .click元素与堆叠错误后面的元素？

Question

我有一个'灯箱'类似的功能，它只会带来2个像这样的div：

绿色（一旦工作就不会着色）是点击关闭登录框的区域。

jsFiddle代码： http://jsfiddle.net/bhcGv/8/

当您点击登录框时，它会在它认为点击绿色框时消失。有什么建议吗？

Answer 1

你需要.stopPropagation方法。

这里更新了jsfidle：http://jsfiddle.net/bhcGv/10/

Answer 2

您可以添加此代码

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

所以你的document.ready函数变成了

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

这应该会在您单击居中的div时停止运行该事件。

您也可以将中心的div从彩色中取出。然后你不会有事件泡沫。

Answer 3

您想要修复两个div的z-index。背景div应该比弹出div具有更小的z-index，并且两者都应该具有相对较高的值。

对于loginOffBox尝试使用1000的z-index，对于centeredBox尝试使用1100，它应该可以正常工作。