jQuery的弹出格在

Question

褪色后淡出我有一个DIV元素就在我的HTML代码

<div id="popup"></div> 

其CSS display属性设置为none最初的开始。现在，当我点击特定的HTML元素时，会发生以下情况：

$('#popup-opener-button').click(function() { 
    $('#popup').fadeIn(); 
}); 

这种方式就像魅力一样。现在，只要点击屏幕上的任何位置，除非点击DIV本身，否则我希望此DIV消失。我想这会做到这一点。

$('#popup').siblings().click(function() { 
    $('#popup').fadeOut(); 
}); 

但我点击我的弹出div来淡出SPAN实际上是＃弹出的兄弟姐妹的孩子，那瞬间衰落之后淡出是否有不这样做？

Answer 1

我不确定这会在一个沉重的DOM中表现如何，因为会有大量的事件冒泡发生，而:not psuedoselector不是最快的，但是此方法使用您可以传递的选择器到.on()筛选出div#popup，本质上允许您单击页面上的任何其他内容来触发​​。

​$(document.body).on('click',':not(#popup)', function(){ $('#popup').fadeOut(); })​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 2

我不知道你怎么希望在#popup点击，如果它最初是隐藏的。这是你的代码中的错误？

这是一个适合我的解决方案。

$('#popup').click(function(e) { 
    $('#popup').fadeIn(); 

    // if i click in the popup, don't bubble the event up to the 'body' 
    e.stopPropagation(); 

    // hook up the fade-out event to the body to handle a click anywhere else 
    $('body').one('click', function() { $('#popup').fadeOut(); }); 
});