Question

如果点击背景，我试图隐藏弹出窗口，但不是div。基本上，当用户点击背景时它会隐藏div;但是，如果用户点击实际的div，它仍然会隐藏它。我只想在点击背景时隐藏div。

这是我的代码：

HTML

<div id="linkinputholder">
    <div id="linkinputbox">
        Title
    </div>
</div>

<button onclick="displaylinkinput()" type="button"> Display </button>

CSS

#linkinputholder {
  display: none;
  position: fixed;
  z-index: 100;
  width: 100%;
  min-height: 100%;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.2);
}

#linkinputbox {
  display: block;
  background-color: red;
  width: 500px;
  height: 100px;
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

JS / Jquery的

function displaylinkinput() {
    document.getElementById('linkinputholder').style.display = "block";
}

    $('#linkinputholder').click(function() {
        document.getElementById('linkinputholder').style.display = "none";
    });

Answer 1

我假设您的背景是指您的linkinputholder div，它是100％宽，100％高。你的jquery代码缺少对displaylinkinput的调用，所以我添加了一个click事件处理程序来调用它。当您单击linkinputbox div时，click事件将向下传递给linkinputholder。为了防止这种情况，只需停止事件传播。

$('#linkinputbox').click(function (evt) {
        evt.stopPropagation();
    });

我在这里为你创建了一个JSFIDDLE：http://jsfiddle.net/seadonk/oLgex1pq/

以下是更正的javascript：

function displaylinkinput() {
    $('#linkinputholder').show();
}

$(function () {
    $('button').click(function () {
        displaylinkinput();
    });

    $('#linkinputholder').click(function () {
        $('#linkinputholder').hide();
    });

    $('#linkinputbox').click(function (evt) {
        evt.stopPropagation();
    });
})();

Answer 2

修改检查div是否为目标

$('#linkinputholder').click(function(event) { if (jQuery(event.target).is('.linkinputholder')) return; document.getElementById('linkinputholder').style.display = "none"; });

隐藏容器如果单击背景不起作用

2 个答案: