Question

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

然后我需要一个在加载页面时打开的模态，所以我使用了：

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

最初这是非常透明的，所以我在这里找到了一个答案，说我必须使用以下方式覆盖样式：

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

它工作得很好，并且阻止了模态透明，而是使背景变白。这很好。

然而，当我回到我网站上的任何其他模态时，它们不再具有以前的黑色渐变，现在它完全透明。我不确定我是否覆盖了错误的东西，或者我是否需要为我需要的第二个模态编写另一个类。

Answer 1

尝试使用ClassName或#purchaseModal.modal-backdrop.fade.in{ opacity: 1 !important; filter: alpha(opacity=100) !important; background: #fff; }覆盖类。

$(".triggerZone2").on("click", function(){
 $(".rainbow").toggleClass("rainbowed");
});

它只能使用purchaseModal id工作/覆盖，而其他将与其默认样式保持一致。

希望这会对你有所帮助。

Answer 2

您正在将该样式应用于所有引导模态。你应该做的就是给那个模态一个额外的类来定义样式。

例如，您可以将模态命名为没有褪色的背景modal-with-no-background。这意味着你可以摆脱使用!important重写样式声明的不良做法。

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

Answer 3

您是否在使用CSS的外部样式表？如果是这样，这将适用于整个网站。

听起来好像你正在寻找除了寻找不同白色背景的一页以外的黑色背景的所有模态，这是正确的吗？

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

你可以创建.modal-backdrop.fade.in.black＆amp; .modal-backdrop.fade.in.white 并在外部CSS中相应地更改颜色

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