Bootstrap 3 模态框覆盖层的背景颜色和动画

Question

我有一些问题，在使用Bootstrap 3时，更改模态窗口显示时的背景颜色。

理想情况下，我希望它更接近黑色，并稍微降低不透明度，但当您点击此处的框时;

http://roblb.devour.org/march2014/index%20copy.html

此外，我如何停止模态框向下滑动？我只想让它淡入淡出。我在这里看到了一些内容，但是没有一个能够真正回答这个问题...谢谢，Rob。

- Akirob

---

我刚刚发现，如果我在以下样式中添加颜色; .modal {background-color:black;} 这将设置背景颜色。然而，我仍然卡在模态滑动上... - Akirob

Answer 1

要更改背景颜色，您可以使用以下代码：

.modal-backdrop {
  background-color: #0000ff;
}

或者分成不同的类：

.modal-blue .modal-backdrop {
  background-color: #0000ff;
}

.modal-white .modal-backdrop {
  background-color: #ffffff;
}

然后将该类添加到您的div中：

<div class="modal fade modal-white" ... >
  <div class="modal-dialog">
      ...
  </div>
</div>

为停止滑动，请删除“fade”类。

希望这能帮到你，

祝好。

- Cairo

Answer 2

简单的解决方法是覆盖默认设置。只需使用以下代码：

.fade.in {
   background: #000; // or whatever you like
}

- claudios

Answer 3

我使用了：

.modal {
  background-color:black;
}

它起作用了。

- Théo T. Carranza

Answer 4

We can also try below pattern. 

    .modal-content
    {
       background-color: #331a00;
       color: #b3c6ff;
    }

    .modal-content h5{  
       color: #ffcc00;
    }

    .close{
       color: #cf3834;
    }

    .modal-content button{
       background-color: #ffcc00;
       color: #cf3834;
    }

- Venu Gopal