bootstrap：仅针对特定模态更改模态背景不透明度

我有一个包含多个模态的菜单。 当我打开另一个时，它会将背景变成黑色，这很难看。 我知道我需要更改filter: alpha(opacity=80); 在bootstrap.css中的.modal-backdrop.fade.in中。 但是我需要改变它不适用于所有模态，仅适用于其中一些模态。 这是第一个模态的html代码

  
 
 × 
MBUS
 
 
 
   
 
 
 Закрыть Применить  

这种模式需要改变他的背景：

  
 
 × 
DIN
 
 
 
 
 Закрыть Применить 
  

Answer 1

有点复杂的是，背景是由Modal插件动态生成的。 一种可行的方法是在获得show事件时向正文添加一个类，然后在隐藏时删除它。

就像是：

CSS

 .modal-color-red .modal-backdrop { background-color: #f00; } .modal-color-green .modal-backdrop { background-color: #0f0; } .modal-color-blue .modal-backdrop { background-color: #00f; } 

JS

 $('.modal[data-color]').on('show hidden', function () { $('body').toggleClass('modal-color-'+ $(this).data('color')); }); 

HTML

 
...
 
...
 
... 

的jsfiddle

Answer 2

只有CSS / HTML

JSFiddle： http ： //jsfiddle.net/szoys6d7/

HTML

 
... 

CSS

 .modal2.fade.in ~ .modal-backdrop.fade.in { background-color: #f00; } 

Answer 3

这是你的模态的html标记

 
 ....  

在html文件的样式元素内使用此样式

和脚本

Answer 4

对于角度ui引导：

初始化时使用backdropClass ：

 $modal.open({templateUrl:'', controller:'', backdropClass:'' }); 

http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/

Answer 5

给你的模态一个单独的类

而你所需要的只是：

.yourclass {background：rgba（0,0,0,0.8）; }

Answer 6

永远地把我带走，但我发现了一个单行。

 $(window).load(function(){ // remove greying background bootstrap modal effect $(".modal-backdrop ").attr('class', 'someClass'); }); 

删除类删除了模态。 但重命名它保留了function，但摆脱了背景灰色。