Bootstrap 3 模态叠加背景颜色和动画答案

【问题标题】：Bootstrap 3 modal overlay background color and animationBootstrap 3 模态叠加背景颜色和动画
【发布时间】：2014-06-06 11:01:02
【问题描述】：

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

理想情况下，我希望它更像黑色并稍微降低不透明度，但是当您单击此处的框时；

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

另外 - 我如何阻止 Modal 向下滑动？我只是想让它消失？我在这里看到了一些项目，但他们都没有真正回答这个问题......

谢谢

罗伯

【问题讨论】：

我刚刚发现如果我为以下样式添加颜色； .modal {background-color:black;} 设置背景颜色。但是，我仍然卡在模态下滑...

标签： twitter-bootstrap-3 overlay

【解决方案1】：

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;
    }

【讨论】：

【解决方案2】：

简单的补救方法是覆盖默认值。只需使用：

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

【讨论】：

【解决方案3】：

我用过：

.modal {
  background-color:black;
}

它奏效了。

【讨论】：

【解决方案4】：

要更改背景颜色，您可以使用以下命令：

.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”类。

希望对您有所帮助，

问候。

【讨论】：