Question

我试图编写jquery代码，这将关闭简单的弹出窗口。这是一个例子。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

.popup

＆＃13;

$(".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();
});

＆＃13;

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

＆＃13;

另请注意，您当前的代码将关闭所有打开的<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()。

Jquery关闭弹出窗口

1 个答案: