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

时间:2014-04-22 07:34:10

标签: twitter-bootstrap-3 overlay

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

理想情况下,我希望它更像是黑色并略微降低不透明度,但当你点击位于此处的方框时;

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

另外 - 如何阻止模态滑落?我只想让它淡入?我在这里看到了一些项目,但实际上没有人回答这个......

由于

罗布

4 个答案:

答案 0 :(得分:12)

要更改背景颜色,您可以使用此选项:

.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>

停止向下滑动删除“淡入淡出”类。

希望得到这个帮助,

问候。

答案 1 :(得分:2)

简单的补救措施是覆盖默认值。 只需使用:

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

答案 2 :(得分:0)

我用过:

.modal {
  background-color:black;
}

它有效。

答案 3 :(得分:0)

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