Question

我需要在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>

请提前帮助谢谢.....

Answer 1

试试这个：

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

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

Answer 2

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

＆＃13;

$('#open-popup').click(function() {
  $('#popup').show();
});

$('.popup_wrap .blanket').click(function() {
  $(this).parent().fadeOut(100);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在div隐藏div之外的Onclick

2 个答案: