Onclick 在 div 之外隐藏 div [重复]答案

【问题标题】：Onclick Outside of the div hide div [duplicate]Onclick 在 div 之外隐藏 div [重复]
【发布时间】：2015-06-09 11:03:05
【问题描述】：

我需要在 jquery 中它是简单的经验。我在单击 div 时打开了一个弹出窗口，但我想在单击 div 外部时将其隐藏。现在只有当我点击关闭按钮时它才会隐藏。结束是

<a class="close-up" href="#" onclick="popup('popUpDiv')" >X</a>

div 是

<div id="blanket" style="display:none;"><a class="close-up" href="#" onclick="popup('popUpDiv')" >X</a></div>
<div id="popUpDiv" style="display:none;">  <div class="main-navBar">kfbkasfkafkja</div> </div>

请帮忙提前谢谢.....

【问题讨论】：

哇，谢谢先生......
但是有问题先生
请访问demo.reservestep.com/Bahou/contact/# 并单击菜单链接，当我单击菜单链接@pschueller 时，您会明白它也隐藏了
你好，先生@pschueller先生发生了什么
在stackoverflow.com/a/18817441/383904查看我的回答

标签： javascript jquery html css

【解决方案1】：

这是我使用 jQuery 构建的示例。而不是观看 div 之外的所有内容，它会添加一条毯子并等待用户单击它。您要查找的内容与Bootstrap's modals 非常相似。

$('#open-popup').click(function() {
  $('#popup').show();
});

$('.popup_wrap .blanket').click(function() {
  $(this).parent().fadeOut(100);
});

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.popup_wrap{
  display: none;
}
.popup_wrap,
.blanket {
  height: 100%;
  width: 100%;
  position: absolute;
}
.blanket {
  z-index: 1000;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup {
  z-index: 1001;
  display: inline-block;
  position: absolute;
  background-color: #fff;
  width: 50%;
  margin: 50px 25% 0 25%;
  padding: 5px;
}
.fake-link{
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='popup' class='popup_wrap'>
  <div class='popup'>
    Some text...
  </div>
  <div class='blanket'></div>
</div>

<span id='open-popup' class='fake-link'>Open Popup</span>

【讨论】：

【解决方案2】：

试试这个：

$(document).mouseup(function (event)
{
    var container = $("#popUpDiv");

    if (!container.is(e.target) && container.has(event.target).length === 0) 
    {
        container.hide();
    }
});

【讨论】：