Javascript Bootstrap多模态模态背景问题

我有一个页面，其中一个引导模式打开另一个模式

问题是，对于每个打开的模式，它都会添加

添加到HTML代码。第一个可以，但是因为它的透明度是：.5然后它会使页面在每次打开时都变暗。是否有办法检查是否已经存在

模式背景

，在这种情况下，是否不打开另一个

我用其中一个打开情态动词

或者使用jQuery：

$（'#model_01'）。model（'show'）

非常感谢对这个问题的任何帮助

为了您的方便，这里有一把小提琴：
让CSS来处理它

.modal-backdrop:nth-child(2n-1) {
  opacity : 0;
}

您可以根据需要添加/删除数据background=“false”属性。除此之外，您还可以包括css，如

.modal-backdrop+.modal-backdrop {
  opacity : 0;
}

这是我认为适合你的工作演示


$（.modal”）.on（“show.bs.modal”，函数（）{
如果（$（“.modal background”）.length>1）{
$（“.modal background”）.not（“：first”）.remove（）；
}
})

开放模态
开放模态
开放式模式3

//确保只渲染一个背景
$（document）.on（'show.bs.modal'，'.modal'，function（）{
如果（$（“.modal background”）.length>1）{
$（“.modal background”）.not（“：first”）.remove（）；
}
});
//在关闭时移除所有背景
$（document）.on（'hide.bs.modal'，'.modal'，function（）{
如果（$（“.modal background”）.length>1）{
$（“.modal background”）.remove（）；
}
});这是一个UI问题-问题是您正在覆盖多个模态，并导致您的问题日益严重。解决方案是整理您的工作流，以便一次只能打开一个模式。也许您可以在同一个模式中使用不同的div，并切换它们的可见性/显示状态——但是，在第一个模式仍然打开的情况下，一秒钟打开一个模式是非常糟糕的UI/UX。就在不久前，你还不能这么做。现在更重要的是你不应该这样做。IMO。您还可以整理您的呼叫链接-您可以添加/删除数据background=“false”取决于对孩子的要求modals@ABUdhay谢谢你的提示！它似乎起作用，但只是部分起作用，因为点击一个空白区域并不能关闭模式：（最简单的技巧是
.modal{background:rgba（0,0,0,0.5）！important；}.modal background{display:none！important；}
我们会尝试，但最好用几行来详细说明。虽然这段代码可以回答这个问题，但提供关于它如何和/或为什么解决问题的附加上下文将提高答案的长期价值。解决方案对我来说很有效，但同意前面关于提供解决方案信息的评论
$(document).on('show.bs.modal', '.modal', function () {
    if ($(".modal-backdrop").length > -1) {
        $(".modal-backdrop").not(':first').remove();
    }
});