如何在jQuery for div中应用“if event target”并适用于所有孩子（模态关闭问题）？

Posted 2021-04-16

我在页面上有一个典型的模态设置。您按一个按钮激活。屏幕变暗（通过全屏幕背景div），模态位于其前面（最高z-index）。

我也经常设置它，你可以按下关闭按钮或主模式之外的任何地方，关闭它。

如果模态为空，这一切都正常。

问题：当你点击模态中的任何子内容（文本，div等）时，这也是关闭模态。

下面是我的代码，假设忽略#modal中的点击，但它没有将其应用于其中的所有子内容。

#blackout表示主模态背后的半透明全屏div（常见模态效果）。

$("#blackout").click(function(event){
if(event.target === modal){
return false;
}
else{
$("#blackout").css( 'display', 'none');
} 
});

有没有办法更改代码，以便if语句适用于模态，以及其中的任何内容？

谢谢。

答案

我能够自己解决问题。也许这会对其他人有所帮助。

假设你的主模态div是#modal，添加下面的代码仍然允许在模态内的子元素上使用链接等功能，但是这样做会避免不必要的模态关闭。

$("#modal").click(function(e){
       e.stopPropagation();
});