Javascript 在弹出区域外单击时，弹出将返回隐藏状态

如果我有一个使用div的弹出窗口，当有人单击div之外的任何地方时，我如何让div返回隐藏状态

i、 e.弹出窗口可见，然后有人在弹出窗口外单击，div应再次隐藏

---

如何实现此功能？

实现此功能的常用方法是使用覆盖。创建div弹出窗口时，也要在其下方创建一个占据整个屏幕的窗口：

div#overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

（可选）您可以使用此覆盖以使所有其他内容变暗，例如背景：000和不透明度：0.5

在您精心编制JavaScript以将此覆盖添加到弹出窗口的正下方之后，向其添加一个单击侦听器。当用户单击覆盖时，您将知道他/她已在弹出窗口外单击

---

请注意位置：修复在旧浏览器中不起作用。一种解决方法是，当覆盖显示时，改为将覆盖设置为position:absolute，然后临时添加overflow:hidden以防止用户向下滚动。

另一种对我来说更直接的方法是：

$("body").click(function (event) {
    var outside = $(event.originalTarget).parents("#popup").length === 0;
    if (outside) {
        $("#popup").remove();
        $("body").unbind("click");
    }
});

---

简而言之，originalTarget就是实际单击的对象，然后脚本检查popup是否是jQuery中称为parents的祖先之一。如果不是，则单击在外部，我们将删除弹出窗口。

啊，好的，人们就是这样做的。基本上，当YRU弹出窗口可见时，将属性添加到外部div覆盖中，使其变为灰色，并将单击事件附加到其上..宾果！谢谢