Question

当用户单击div时，将显示一个弹出窗口。当他们单击弹出窗口之外的任何位置时，弹出窗口应关闭。现在，仅当用户在div之外单击时，弹出窗口才会关闭。如果用户在屏幕上显示弹出窗口时单击div，则弹出窗口不会消失。我认为这是因为div本身具有一个on事件，该事件会导致弹出窗口出现，因此单击div并不会使其消失。

$('div').click(function() {
  $('.popup').show();
});

// Clicking the 'x' hides the pop up
  $('.fa-times').click(function () {
  $('.popup').hide();
  });

$(document).mouseup(function(e) {
  var container = $(".popup");

  var clickedElement = e.target;

  if (!container.is(clickedElement) || clickedElement.className === 'box') {
    container.hide();
  }
});

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.popup {
  border: 2px solid red;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 200px;
  margin: 0 auto;
  padding: 15px;
  margin-top: 50px;
  background: #eee;
  border-radius: 8px;
  box-shadow: 0 0 10px #999;
  overflow: hidden;
  z-index: 2;
}

.popup .fa-times {
  position: absolute;
  top: 0;
  right: 2%;
}

.popup .fa-times:hover {
  color: #D54444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
                integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
                crossorigin="anonymous">

<div class="box">
  <div class="popup">
  <i class="fas fa-times"></i>
  </div>
</div>

这里是fiddle

我试图解决此问题的方法是获取被单击元素的类名，如果该元素是div，则将其隐藏。但这没有用。我认为这是因为单击它会导致弹出窗口出现。

我已经看过许多关于stackoverflow的类似问题，但它们没有帮助。谢谢您的任何建议。

Answer 1

也许是这样吗？

$('.box').click(function() {
  $('.popup').toggle()
})

$(document).mouseup(function(e) {
  if (e.target.className != 'box')
    $('.popup').hide()
})

https://jsfiddle.net/2bg9e3f6/1/

当用户在弹出窗口之外单击时，使弹出窗口关闭

1 个答案: