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

Question

执行模态的经典方法是使用内容（对话框）和带有z-index lower（overlay）的div然后，我可以在叠加层上绑定click事件并隐藏de content对话框。

<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事件绑定到close de dialog？

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将停止事件传播到父控件，您将不会获得模型点击事件：

$('.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();
  }
});