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

Posted 2023-03-05

【中文标题】Onclick 在 div 之外隐藏 div [重复]

【英文标题】：Onclick Outside of the div hide div [duplicate]

【发布时间】：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先生发生了什么

在***.com/a/18817441/383904查看我的回答

【参考方案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();
    
);