jquery 创建弹出窗口

aelbi1ox 于 2023-08-04 发布在 jQuery

关注(0)|答案(5)|浏览(117)

我想创建弹出窗口。但我有一些问题：
在弹出窗口外单击后，弹出窗口应消失。但在我的解决方案弹出消失，当我点击里面。下面是我的代码：

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

jquery

来源：https://stackoverflow.com/questions/37284492/create-popup-window

5条答案

按热度按时间

bn31dyow1#

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

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

字符串
https://jsfiddle.net/fw1d59Lz/1/

赞(0）回复(0）举报 2023-08-04

cpjpxq1n2#

把它添加到你的jquery中，你就可以开始了-

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

字符串

赞(0）回复(0）举报 2023-08-04

vc6uscn93#

事件不断涌现。因此，当您单击.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();
    });
});

字符串

赞(0）回复(0）举报 2023-08-04

nnsrf1az4#

这可能对你有帮助

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

字符串

赞(0）回复(0）举报 2023-08-04

drkbr07n5#

使用jqueryUI对话框。
https://jqueryui.com/dialog/
然后你就可以编写你的自定义事件来在你需要的时候打开和关闭对话框。

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 创建弹出窗口

5条答案

相关问题

热门标签

最新问答