我有一个包含多种模式的菜单。当我打开一个又一个时，背景会变成黑色，这很丑。
我明白我需要改变filter: alpha(opacity=80); in .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>
这个模式需要改变他的背景：
<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>
背景是由 Modal 插件动态生成的，这一事实有点复杂。一种可能的方法是当你得到一个类时向主体添加一个类show事件，然后将其删除hidden.
就像是：
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
<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 http://jsfiddle.net/mmfansler/axhfF/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
