Jquery 如何更改两种不同的引导模式'；背景色？

创建引导模式时，.modal background将添加到HTML的末尾以创建背景色。我可以通过更改该类的颜色来手动切换颜色，但是我想根据触发的两个模态中的哪一个来切换该类的颜色

我目前正在使用一个同级选择器来尝试区分我喜欢的颜色，但不管调用哪种模式，它现在都会显示#000

CSS:

$（.modal1”）.on（'show.bs.modal'，function（）{
$（'.modal background'）.css（'background'，'red'）；
});
$（.modal1”）.on（'hidden.bs.modal'，function（）{
$（'.modal background'）.css（'background'，'#000'）；
});
.wrap{
填充：15px；
}
h1{
字号：28px；
}
h4，
情态标题{
字号：18px；
字体大小：粗体；
}
.没有边界{
边界：0px；
}
.正文信息{
字号：18px；
}
.居中{
文本对齐：居中；
}
.btn主要{
背景色：#2086c1；
边框颜色：透明；
大纲：无；
边界半径：8px；
字体大小：15px；
填充：10px 25px；
}
.btn主：悬停{
背景色：#2086c1；
边框颜色：透明；
}
.btn主要：焦点{
大纲：无；
}
.model 1.模态背景{
背景：红色；
}

引导模式示例
模式1
&时代；
此处为模式1。

引导模式示例
模式2
这里是模态2。
如何更改此背景色

这两种方法有何不同。。。在标记中的位置、同级和/或具有唯一类？我尝试将唯一类.card modal添加到第二个模式HTML（高亮显示）中，以便在调用该类时，底部附加的.modal background类使用#000。问题是，现在两个模态都以#000结尾，包括第一个模态HTML，它没有唯一的class.card-modal。谢谢你的回答，沙林，你能解释一下你的jquery吗？我可以看到，在每个模式HTML上有两个独立的类（modal1，modal2），但在jquery中，似乎只是更改了modal1的颜色。如果只是在JQuery中切换css类，为什么需要有2个css类？另外，“show.bs.modal”和“hidden.bs.modal”如何知道您指的是哪种模态？最后，如果打开模式1，您会注意到在变为红色之前，仍有#000的闪烁。我们如何防止这种情况？
.modal-backdrop {
  background-color: #fff;
}
.card-modal ~ .modal-backdrop {
  background-color: #000;
}