首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >bootstrap:仅更改特定模式的模式背景不透明度

bootstrap:仅更改特定模式的模式背景不透明度
EN

Stack Overflow用户
提问于 2012-08-17 12:57:16
回答 4查看 59.1K关注 0票数 24

我有一个有多个情态模式的菜单。当我一层一层地打开时,背景变成了黑色,这是丑陋的。我知道我需要在bootstrap.css的.modal-backdrop.fade.in中更改filter: alpha(opacity=80);。但我不需要为所有的模态修改它,只需要为其中的一些修改。下面是first code的html代码

代码语言:javascript
复制
    <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>

这个模式需要改变他的背景:

代码语言:javascript
复制
    <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>
EN

回答 4

Stack Overflow用户

发布于 2013-06-24 16:43:48

下面是您的模式的html标记

代码语言:javascript
复制
<div id="my-modal" class="modal hide fade">
    ....
</div>

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

代码语言:javascript
复制
<style>
    #my-modal>.modal-backdrop.fade.in
    {
        opacity: .1; 
    }
</style>

和脚本

代码语言:javascript
复制
<script type="text/javascript">
    $(document).ready(function(){
        $("#my-modal").modal({
            show: true
        });
    });
</script>
票数 4
EN

Stack Overflow用户

发布于 2016-11-17 18:10:59

对于angular ui引导:

初始化时使用backdropClass

代码语言:javascript
复制
$modal.open({templateUrl:'',
controller:'',
backdropClass:''
});

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

票数 1
EN

Stack Overflow用户

发布于 2014-07-08 03:41:15

我花了很长时间,但我找到了一句笑话。

代码语言:javascript
复制
$(window).load(function(){
    // remove greying background bootstrap modal effect
    $(".modal-backdrop ").attr('class', 'someClass');

});

删除类将删除模式。但是重命名它会保留功能,但不会使背景变灰。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12000011

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档