Question

我想要创建弹出窗口。但是我有一些问题：左键点击后弹出窗口会消失。但是在我的解决方案中，当我点击它时，弹出窗口消失了。这是我的代码

<div class="popup__show">Click Me</div>
<div class="popup__container">
  <div class="popup">
    hellohellohellohellohellohellohellohellohellohellohellohello
  </div>
</div>

jquery的

$(document).ready(function() {
    $('.popup__show').click(function() {
        $('.popup__container').show();
    });
    $('.popup__container').click(function() {
        $('.popup__container').hide();
    });
});

https://jsfiddle.net/fw1d59Lz/ - 小提琴感谢您的回答和我的英语故事。

Answer 1

当弹出一个弹出窗口时，您可以停止传播事件：

$('.popup').click(function(event) {
    event.stopPropagation();
});

https://jsfiddle.net/fw1d59Lz/1/

Answer 2

在你的jquery中添加它，你很高兴 -

  $('.popup').click(function(evt) {
     evt.stopPropagation();
  });

Answer 3

事件泡沫起来。因此，当您点击.popup时，.popup__container会听到它，除非您停止它。为此，请在活动上致电stopPropagation()。

$(document).ready(function() {
    $('.popup__show').click(function(e) {
      $('.popup__container').show();
    });
    $('.popup').click(function(e) {
      e.stopPropagation();
    });
    $('.popup__container').click(function(e) {
      $('.popup__container').hide();
    });
});

Answer 4

这可能会对你有所帮助

$('.popup__container').click(function(e) {
if (e.target !== this)
return;
$('.popup__container').hide();
});

Answer 5

使用jqueryUI对话框。

https://jqueryui.com/dialog/

然后，您可以编写自定义事件，以便随时打开和关闭对话框。

创建弹出窗口

5 个答案: