問題描述

我有一個包含多個模式的菜單.當我打開一個在另一個上時，它會將背景變成黑色，這很難看.我知道我需要更改 filter: alpha(opacity=80); in .modal-backdrop.fade.in in bootstrap.css.但我需要更改它不是針對所有模態，僅針對其中一些模態.這是第一個模態的html代碼

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

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

推薦答案

背景是由 Modal 插件動態生成的，這有點復雜.一種可能的方法是在收到 show 事件時向 body 添加一個類，然后在 hidden 上將其刪除.

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 show event, then remove it on the hidden.

類似:

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

這篇關于bootstrap:僅針對特定模態更改模態背景不透明度的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！