创建弹出窗口

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__container').click(function(e) { 
if (e.target !== this) 
return; 
$('.popup__container').hide(); 
}); 

Answer 2

时，在弹出的点击情况，您可以阻止事件的传播：

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

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

Answer 3

在你的jQuery添加这一点，你很好去 -

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

Answer 4

事件泡沫升起。所以当你点击.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 5

使用jqueryUI对话框。

https://jqueryui.com/dialog/

然后你可以编写自定义事件来打开和关闭，只要你想对话框。