jQuery关闭弹出窗口

Question

我正在尝试编写 jquery 代码，它将关闭简单的弹出窗口。 这是示例。

当我单击任何图像时，会显示弹出窗口，但是当我尝试关闭它时，它不起作用。我认为这是因为它正在关闭并再次显示。

$(".li").click(function() {
  $(".popup", this).show();
});

$(".popup").click(function() {
  $(".popup").hide();
});

.popup {
  background-color: black;
  opacity: 0.8;
  height: 60%;
  width: 60%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="li">
  <img src="foo.jpg">
  <div class="popup" style="display: none;">POPUP</div>
</div>

<div class="li">
  <img src="foo.jpg">
  <div class="popup" style="display: none;">POPUP</div>
</div>

<div class="li">
  <img src="foo.jpg">
  <div class="popup" style="display: none;">POPUP</div>
</div>

<div class="li">
  <img src="foo.jpg">
  <div class="popup" style="display: none;">POPUP</div>
</div>

Answer 1

您的问题是 .popup 在 li 元素内，因此当您单击 .popup 时它会被隐藏，但单击处理程序也会立即在 li 上运行以再次显示它。

要解决此问题，请在传递给.popup 点击处理程序的事件上调用stopPropagation()，如下所示：

$(".li").click(function() {
  $(".popup", this).show();
});

$(".popup").click(function(e) { // receive the event parameter here
  e.stopPropagation(); // and stop the event bubbling up the DOM here
  $(".popup").hide();
});

.popup {
  background-color: black;
  opacity: 0.8;
  height: 60%;
  width: 60%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="li">
  <img src="foo.jpg">
  <div class="popup" style="display: none;">POPUP</div>
</div>

<div class="li">
  <img src="foo.jpg">
  <div class="popup" style="display: none;">POPUP</div>
</div>

<div class="li">
  <img src="foo.jpg">
  <div class="popup" style="display: none;">POPUP</div>
</div>

<div class="li">
  <img src="foo.jpg">
  <div class="popup" style="display: none;">POPUP</div>
</div>

另请注意，您当前的代码将关闭所有打开的.popup 元素。如果您只想关闭单击的弹出窗口，则可能需要将 $('.popup').hide() 更改为 $(this).hide()。