Javascript jQueryUI对话框下的背景覆盖不'；不要像预期的那样覆盖图像

我有一个关于黑色背景的小问题，当点击第二张粉红色背景的图片时，它会出现。如何使其覆盖图像而不覆盖对话框

由于

jQuery

UI的自定义库，我不能使用

modal:true

如何使其覆盖图像而不覆盖对话框

$（函数（）{
$（“#对话框”）。对话框({
//莫代尔：是的，
自动打开：错误，
开放：功能（e）{
$（'body'）.addClass（'modal'）；
},
关闭：功能（e）{
$（'body'）.removeClass（'modal'）；
}
});
$（“.images”）.find（“a”）.eq（1）.on（'click'，函数（e）{
e、 预防默认值（）；
/*设置超时（（）=>{
window.location.href=$（this.prop（“href”）；
}, 5000);*/
$（“对话框”）。对话框（“打开”）；
});
});
#对话框{
显示：无；
}
img{
宽度：300px；
高度：250px；
对象匹配：覆盖；
}
.莫代尔{
背景色：黑色；
不透明度：1；
溢出：自动；
z指数：1；
}

Lorem ipsum dolor坐在amet Concertetur，告别精英。你知道吗？你知道吗？布朗迪蒂斯·奎斯·普罗维登特

web浏览器使用树状结构在页面上打印HTML内容。
因此，body标记是页面中更深的标记。正因为如此，身体上的黑色背景无法覆盖身体内部的其他元素

只需在.images和#对话框之间创建一个div标记，例如称为#modal background。然后，在打开或关闭模式时，显示并隐藏#模式背景

的样式可以是这样的：

#modal-background.modal{
宽度：100%；
身高：100%；
不透明度：1；
溢出：自动；
z指数：1；
背景色：黑色；
}
```
使用CSS:：after伪元素。

请删除
背景色：黑色CSS来自
.modal
。只需在下面添加CSS

.modal:after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

此技术中的样式和注意事项非常简单，我们将在主体上设置：after伪元素的样式。您可以选择相对于主体绝对定位伪元素，或者给它一个固定位置

更新的代码片段：-


$（函数（）{
$（“#对话框”）。对话框({
//莫代尔：是的，
自动打开：错误，
开放：功能（e）{
$（'body'）.addClass（'modal'）；
},
关闭：功能（e）{
$（'body'）.removeClass（'modal'）；
}
});
$（“.images”）.find（“a”）.eq（1）.on（'click'，函数（e）{
e、 预防默认值（）；
/*设置超时（（）=>{
window.location.href=$（this.prop（“href”）；
}, 5000);*/
$（“对话框”）。对话框（“打开”）；
});
});
#对话框{
显示：无；
}
img{
宽度：300px；
高度：250px；
对象匹配：覆盖；
}
.莫代尔{
不透明度：1；
溢出：自动；
z指数：1；
}
.莫代尔：之后{
内容：''；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
}

Lorem ipsum dolor坐在amet Concertetur，告别精英。你知道吗？你知道吗？布朗迪蒂斯·奎斯·普罗维登特

如果你真的想
把jQuery
对话框后面的所有div都隐藏起来，那么你需要
把
图像
包装在
div
中，并在上面使用CSS，而不是在这里使用
body

此外，我们不再需要
不透明度
，因为所有颜色都将
变暗
。您可以使用或执行该操作

为了更好地练习：（在你的例子中）我将
图像
div包装在这个div中的新div
.modal body
中，以获得这些结果

现场工作演示：


$（函数（）{
$（“.images”）.find（“a”）.eq（1）.on（'click'，函数（e）{
e、 预防默认值（）；
$（“#对话框”）。对话框({
自动打开：错误，
开放：功能（e）{
$（'body'）.addClass（'modal'）；
},
关闭：功能（e）{
$（'body'）.removeClass（'modal'）；
}
}).对话框（“打开”）；
设置超时（（）=>{
//window.location.href=$（this.prop（“href”）；
}, 50000);
});
});
#对话框{
显示：无；
}
img{
宽度：300px；
高度：250px；
对象匹配：覆盖；
}
.莫代尔{
背景颜色：粉红色；
}
.莫代尔：之后{
内容：''；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景颜色：粉红色；
}



Lorem ipsum dolor坐在amet Concertetur，告别精英。你知道吗？你知道吗？布朗迪蒂斯·奎斯·普罗维登特

（我注释掉了您代码中的位置更改，这样我们至少可以检查您的代码片段，而不会在几秒钟后将其从我们的下面拉出…@CBroe谢谢！如果您能为这种背景推荐一种解决方案，我将不胜感激！这里没有实际的覆盖元素可以定位并放置在z轴上的图像和对话框元素之间的某个位置-您只需通过
模式
类为主体提供黑色背景色。因此，您需要创建这样一个元素。感谢您提供的宝贵提示：after！谢谢你给我的建议！感谢您花费宝贵的时间来帮助我进行视频演示。今天我学到了很多关于jQuery的知识，我很感谢像您这样愿意帮助初学者进行前端开发的人和开发人员。@JustMe很高兴帮助了您，也很高兴编写代码。如果您还需要其他帮助，请告诉我：）