Jquery 如何关闭div（模态）单击外部。Pinterest和Facebook之路

实现模式的经典方法是使用带有内容的div（对话框）和z索引较低的div（覆盖） 然后，我可以绑定覆盖和隐藏内容对话框上的单击事件

<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>

但在这种方法中，如何将单击事件绑定到仅在没有对话框的覆盖中关闭de对话框

---

通过这样做：

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

---

：防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。

stopPropagation

将停止事件向父控件的传播，您将无法获得模型单击事件：

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

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

编辑，这是实现上述目标的更好方法

如评论中所述，可能有一种更好的方法，而不是上文中所讨论的建议解决方案。通过这种方式，您可以确保内部项没有被单击隐藏

---

强烈建议不要使用

stopPropagation（）

<强烈反对使用代码>停止播放（）。。。谢谢@user664833。

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