Question

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

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

如何实现此功能？

Answer 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>以防止用户向下滚动。

Answer 2

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

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

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

在弹出区域外单击时，弹出窗口会返回隐藏状态

2 个答案: