时间戳

首页 > 解决方案 > 如何在 jQuery 中为 div 应用“if event target”并也适用于所有子项（模态关闭问题）？

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

问题描述

我在页面上有一个典型的模式设置。你按下一个按钮来激活。屏幕变暗（通过全屏背景 div）并且模态在其前面（最高 z-index）。

我也将它设置为通常您可以按下关闭按钮或主模式之外的任何位置来关闭它。

如果模态框为空，这一切都可以正常工作。

问题：当您单击模式中的任何子内容（文本、div 等）时，这也会关闭模式。

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

#blackout 代表主模态后面的半透明全屏div（普通模态效果）。

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

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

谢谢。

标签： jquerymodal-dialogparent-child

解决方案

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

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

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

推荐阅读