如何关闭外部的div（模态）单击。 Pinterest和Facebook的方式

Question

做一个模式的经典方式是与内容（对话框）和div与Z指数较低（覆盖）的div 然后，我可以绑定覆盖上的点击事件并隐藏de内容对话框。

<div class="dialog">...</div> 
<div class="overlay" style="background-color:rgba(255, 255, 255, 0.9)"> 

但我注意到Pinterest和Facebook将它与一个div结合在一起。

<div class="overlay" style="background-color:rgba(255, 255, 255, 0.9);position: fixed; z-index: 9999;top: 0;right: 0;bottom: 0;left: 0;"> 
     <div class="dialog" style="position: static;"></div> 
</div> 

但是在这种方法中，如何绑定click事件以仅在没有对话框的叠加层中关闭de对话框？

http://jsfiddle.net/mCupS/9/

Answer 1

通过做这样的事情：

$('.modal').click(function(){ 
    $('.modal, .inner').hide(); 
});          
$('.inner').click(function(e){ 
    e.stopPropagation(); 
});    
​ 

http://jsfiddle.net/mCupS/10/

event.stopPropagation()：冒泡DOM树，阻止任何父处理程序被通知的事件阻止事件。

Answer 2

stopPropagation将停止事件传播到父控件，你不会得到模型click事件：

$('.modal ').click(function(){ 
    alert("a"); 
}); 

$('.inner').click(function(e){ 
    alert("b"); 
    e.stopPropagation(); 
}); 

编辑，更好的方式来实现上述。

如在The Dangers of Stopping Event Propagation中讨论的建议解决方案中所指出的那样，可能有更好的方式。通过这种方式，您可以确保内部项目不被点击隐藏。

Live Demo

$(document).on('click', function(event) { 
    if (!$(event.target).closest('.inner').length) { 
    $('.modal .inner').hide(); 
    } 
});