引导：更改模式背景不透明度仅适用于特定模态 [英] bootstrap: change modal backdrop opacity only for specific modals

问题描述

我有一个有多个模态的菜单。当我打开一个在另一个它变成黑色，这是丑陋。
我明白我需要改变 filter：alpha（opacity = 80）; in .modal-backdrop.fade.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>

推荐答案

通过模块插件在飞行。一种可能的方式是在您获得显示事件时向其添加一个类，然后在隐藏上将其删除。

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

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>

这篇关于引导：更改模式背景不透明度仅适用于特定模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！