Javascript 单独的背景淡入引导模式

我有一个网站，使用引导模态相当多。他们以正常的方式工作，黑色的褪色背景会模糊页面上的内容

然后，我需要一个在加载页面时打开的模式，因此我使用：

<div class="modal-backdrop fade in" id="purchaseModal" tabindex="-1" role="dialog">

它工作得很好，阻止了模态的透明化，反而使背景变成了白色。这很好

---

然而，当我回到我的网站上的任何其他模式，他们不再有他们过去的黑色褪色，它现在是完全透明的。我不确定我是否写得太多了，或者我是否需要为我需要的第二个模态编写另一个类。

您正在将该样式应用于所有引导模态。您应该做的是相应地为model提供一个额外的类

例如，您可以命名没有褪色背景的模态

没有背景的模态
。这意味着您可以摆脱使用
重写样式声明的错误做法！重要信息

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

您是否为CSS使用外部样式表？如果是这样，这将适用于整个现场

听起来好像你在寻找所有的情态动词都有黑色背景，除了一页你在寻找一个不同的白色背景，这是正确的吗

如果是这样，你有几个选择

您可以创建.modal-background.fade.in.黑色和.modal-background.fade.in.白色
并相应更改外部CSS中的颜色

或者您可以在外部CSS中将您的标准.modal-background.fade.in覆盖为黑色&在您希望背景为白色的页面中，只需使用样式标记覆盖单个页面中的相同样式即可

如果需要，这里有一些示例：
尝试用其
ID
或
ClassName
重写类

#purchaseModal.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}

它将仅对purchaseModal id起作用/覆盖，其他样式将与其默认样式保持相同

希望这能对您有所帮助。
因此我将其添加到样式表中，并在模式代码中使用：但它不起作用。它现在是看不见的。是的，我正在使用一个外部样式表。我理解你的意思，当你说每种颜色做一个，那很好。但是当我使用上面的css时，模式是非常透明的，并且当我将不透明度更改为1时，它将消除所有其他模式上的黑色背景效果。因此，我会为每种类型的模态设置一个，然后在每个类中设置不同的不透明度值吗？不透明度级别描述透明度级别，其中1完全不透明，0.5表示50%透明，0表示完全透明。
#purchaseModal.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}