创建弹出窗口

Create popup window

本文关键字：窗口 创建      更新时间：2023-09-26

我想创建弹出窗口。但我有一些问题：
弹出窗口应该在点击外部后消失。但在我的解决方案中，当我点击内部时，弹出窗口会消失。这是我的代码：

<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/-小提琴

当点击弹出窗口时，您可以停止事件的传播：

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

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

将其添加到您的jquery中，就可以使用了

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

事件弹出。因此，当你点击.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();
    });
});

这可能有助于

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

使用jqueryUI对话框。

https://jqueryui.com/dialog/

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

相关文章：