bootstrap显示遮罩层

最新推荐文章于 2024-07-26 20:46:33 发布

qq_44915190

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.8k

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap jquery javascript

原文链接：https://www.cnblogs.com/jswang/p/9040499.html

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. body中的html

<div class="modal fade" id="loadingModal">
    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        <div class="progress progress-striped active" style="margin-bottom: 0;">
            <div class="progress-bar" style="width: 100%;"></div>
        </div>
        <h5>正在加载...</h5>
    </div>
</div>

2.jquery代码

//显示
$("#loadingModal").modal('show');
//隐藏
$("#loadingModal").modal('hide');

3.其他设置

第一种：
直接添加属性 data-backdrop="static" data-keyboard="false"
data-backdrop="static"  点击遮罩层不关闭模态框，可以为布尔值false，默认true
data-keyboard="false"   按下esc键不关闭模态框，可以为布尔值false，默认true
第二种：
//使点击空白处遮罩层不会消失 
$("#loadingModal").modal({backdrop: 'static'});
//按Tab键遮罩层不会消失 ，默认值为true 
$("#loadingModal").modal({keyboard: false});