25

我有一个包含多个模式的菜单。当我打开一个在另一个上时，它会将背景变成黑色，这很难看。我知道我需要filter: alpha(opacity=80);在.modal-backdrop.fade.inbootstrap.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>
4

6 回答 6

35

由于背景是由 Modal 插件动态生成的，所以有点复杂。一种可能的方法是在收到show事件时向 body 添加一个类，然后在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

于 2012-08-17T05:54:36.640 回答
6

只有 CSS / HTML

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

HTML

<div class="modal hide fade modal2">...</div>

CSS

.modal2.fade.in ~ .modal-backdrop.fade.in {
background-color: #f00; }
于 2014-09-19T15:29:03.290 回答
4

这是您的模态的 html 标记

<div id="my-modal" class="modal hide fade">
    ....
</div>

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

<style>
    #my-modal>.modal-backdrop.fade.in
    {
        opacity: .1; 
    }
</style>

和脚本

<script type="text/javascript">
    $(document).ready(function(){
        $("#my-modal").modal({
            show: true
        });
    });
</script>
于 2013-06-24T08:43:47.977 回答
1

对于角度 ui 引导程序：

backdropClass 初始化时使用：

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

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

于 2016-11-17T10:10:59.317 回答
0

带了我一辈子，但我找到了一条线。

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

});

删除类删除了模态。但是重命名它会保留功能，但会消除背景变灰。

于 2014-07-07T19:41:14.790 回答
-1

给你的模态一个单独的类

你所需要的只是：

.yourclass { 背景：rgba(0, 0, 0, 0.8); }

于 2014-02-25T21:24:37.433 回答