在弹出区域外单击时弹出返回隐藏状态答案

【问题标题】：popup goes back to hidden state when clicking outside the popup area在弹出区域外单击时弹出返回隐藏状态
【发布时间】：2013-04-04 07:53:09
【问题描述】：

如果我有一个弹出窗口（使用 div），当有人点击 div 之外的任何位置时，如何让 div 回到隐藏状态？

即弹出窗口是可见的，然后有人在弹出窗口外点击，应该再次隐藏 div。

我怎样才能实现这个功能？

【问题讨论】：

标签： javascript ajax html

【解决方案1】：

一种流行的方法是使用叠加层。当您创建div 弹出窗口时，还要在其下方创建一个占据整个屏幕的<div id="overlay">：

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

或者，您可以使用此叠加层使所有其他内容变暗，例如 background: #000 和 opacity: 0.5。

在您编写 JavaScript 以在弹出窗口下方添加此叠加层后，为其添加一个点击侦听器。当用户点击覆盖时，您会知道他/她点击了您的弹出窗口之外。

请注意，position: fixed 在旧版浏览器中不起作用。一种解决方法是，当叠加层可见时，将叠加层设置为 position: absolute，然后暂时将 overflow: hidden 添加到 <body> 以防止用户向下滚动。

【讨论】：

啊，好吧，这就是人们的做法。基本上当 yoru 弹出窗口可见时，将属性添加到外部 div（覆盖）以使其呈灰色，将点击事件附加到它......宾果游戏！谢谢

【解决方案2】：

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

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

简而言之，originalTarget 是实际点击的内容，然后脚本会检查 #popup 是否是其祖先之一（在 jQuery 中称为 parents）。如果不是，则点击在外部，我们移除弹出窗口。

【讨论】：