用户对问题“bootstrap：仅对特定模式更改模态背景不透明度的问题？”的回答 - 问答 - 云+社区

bootstrap：仅对特定模式更改模态背景不透明度的问题？
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用

回答 (2)
关注 (0)
查看 (18)

代码如下:

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

提问于 2018-02-062018-02-06 07:38:34

用户回答回答于 2018-02-062018-02-06 16:01:47

背景是由动态的Modal插件生成的，所以有点复杂。

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>

赞0 收藏0 评论0

背景是由动态的Modal插件生成的，所以有点复杂。 CSS .modal-color-red .modal-backdrop { background-color: #f00; } .modal-color-green .modal-backdrop { backgr...

查看全部 2 个问答

腾讯云广州一区DNS变更，需要怎么操作？

5回答

DNS

思潮澎湃轻描淡写的生活，但思潮澎湃

推荐

我也收到相关的通知了，这里分享下~ 2019年1月31日，腾讯云将对广州地区旧的基础网络DNS服务器（10.225.30.181、10.225.30.223）进行下线。在此期间，腾讯云提供最新的DNS服务器供您更新使用。我们建议您尽快将DNS服务器配置进行更新，并且我们为您提供...... 展开详请

赞9 收藏4 评论8