Javascript bootstrap：仅针对特定模态更改模态背景不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12000011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap: change modal backdrop opacity only for specific modals
提问by Timofey Trofimov
I have a menu with multiple modals. When I open one over another it turns backgrount into black, which is ugly.
I understand that I need change filter: alpha(opacity=80);in .modal-backdrop.fade.inin bootstrap.css. But I need to change it not for all modals, only for some of them. Here's the html code for first modal
我有一个包含多个模态的菜单。当我打开另一个时，它会将背景变成黑色，这很丑陋。我明白，我需要改变filter: alpha(opacity=80);在.modal-backdrop.fade.in中bootstrap.css。但我不需要为所有模态改变它，只需要为其中一些。这是第一个模态的 html 代码
<div class="modal hide" id="mbusModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>MBUS</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<form class="well form-inline">
<input type="button" class="btn" onclick="$('#dinMbusModal').modal('show'); $('#tabsMbusDin a:last').tab('show');" value="din">
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Закрыть</a>
<a href="#" class="btn btn-primary" onclick="addPort('mbus',$('#mbusDev').val(),$('#mbusSpeed').val()); $('#mbusModal').modal('hide')">Применить</a>
</div>
This modal needs to change his backdrop:
这个模态需要改变他的背景：
<div class="modal hide" id="dinMbusModal" style="width: 500px; margin: -250px 0 0 -250px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>DIN</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Закрыть</a>
<a href="#" class="btn btn-primary" onclick="addPort('din_mbus',,); $('#dinMbusModal').modal('hide')">Применить</a>
</div>
</div>
回答by merv
Little bit complicated by the fact that the backdrop is generated by the Modal plugin on the fly. One possible way of doing it is adding a class to the body when you get a showevent, then remove it on the hidden.
背景是由 Modal 插件动态生成的，这有点复杂。一种可能的方法是在获得show事件时向主体添加一个类，然后在隐藏的.
Something like:
就像是：
CSS
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
JS
$('.modal[data-color]').on('show hidden', function () {
$('body').toggleClass('modal-color-'+ $(this).data('color'));
});
HTML
HTML
<div class="modal hide fade" id="redModal" data-color="red">...</div>
<div class="modal hide fade" id="greenModal" data-color="green">...</div>
<div class="modal hide fade" id="blueModal" data-color="blue">...</div>
JSFiddle
JSFiddle
回答by romelmederos
ONLY CSS / HTML
只有 CSS / HTML
JSFiddle: http://jsfiddle.net/szoys6d7/
JSFiddle：http: //jsfiddle.net/szoys6d7/
HTML
HTML
<div class="modal hide fade modal2">...</div>
CSS
CSS
.modal2.fade.in ~ .modal-backdrop.fade.in {
background-color: #f00; }
回答by mickeymoon
Here's the html markup for your modal
这是您的模态的 html 标记
<div id="my-modal" class="modal hide fade">
....
</div>
Use this style in inside a style element in your html file
在 html 文件的样式元素中使用此样式
<style>
#my-modal>.modal-backdrop.fade.in
{
opacity: .1;
}
</style>
and the script
和脚本
<script type="text/javascript">
$(document).ready(function(){
$("#my-modal").modal({
show: true
});
});
</script>
回答by Alexandr Ryazantsev
For angular ui bootstrap:
对于角度 ui 引导程序：
Use backdropClasswhen initialize:
使用backdropClass时初始化：
$modal.open({templateUrl:'',
controller:'',
backdropClass:''
});
http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/
http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/
回答by AllieCat
Took me forever, but I found a one-liner.
永远带走了我，但我找到了一个单线。
$(window).load(function(){
// remove greying background bootstrap modal effect
$(".modal-backdrop ").attr('class', 'someClass');
});
Removing the class removed the modal. But renaming it keeps the functionality but gets rid of the background greying.
删除类删除了模态。但重命名它保留了功能，但摆脱了背景灰色。
回答by Mindaugas
Give your modals a separate classes
给你的模态一个单独的类
And all you need is:
您只需要：
.yourclass { background: rgba(0, 0, 0, 0.8); }
.yourclass { 背景：rgba(0, 0, 0, 0.8); }
