bootstrap创建带遮罩层的进度条

最新推荐文章于 2024-04-10 14:09:14 发布

Amo_lt

最新推荐文章于 2024-04-10 14:09:14 发布

阅读量3.7k

点赞数 1

文章标签： bootstrap 遮罩层-进度条加载

前言

本篇博客为转载！！！
特此声明：
1.原文链接：http://51coding.blog.51cto.com/6079322/1754415
2.原作者信息：51cto博客的guyuexuan2012
3.原作者声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://51coding.blog.51cto.com/6079322/1754415
再次感谢原作者！

正文

1.在html或jsp的body中添加如下代码

<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.其他设置

//使点击空白处遮罩层不会消失 
$("#loadingModal").modal({backdrop:'static'});
//按Tab键遮罩层不会消失 ，默认值为true 
$("#loadingModal").modal({keyboard:false});

//也可以一起运用
//backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。
//keyboard 为 false 时，按下 Esc 键不会关闭 Modal。
$('#loadingModal').modal({backdrop: 'static', keyboard: false});

4.例子，只是js调用的代码，未写jsp或html的代码

 doFunction = function(t, e) {      
        var d = dialog({
            title: '提示',
            content: '确定要XXXXX吗？',
            okValue: '确定',
            ok: function () {
                this.title('提交中…');
                //显示
                $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                $("#loadingModal").modal('show');
                $.ajax({
                    type: "post",
                    url:XXXXXXXXX,
                    dataType: "json",                               
                    success: function(msg) {
                        //隐藏
                        $("#loadingModal").modal('hide');
                        BootCommons.alert(msg.message);                          
                   },
                   error: function(msg) {
                     //隐藏
                       $("#loadingModal").modal('hide');
                       if(!msg.message)
                       {
                           BootCommons.alert(msg.message);
                       }else{
                           BootCommons.alert("生成失败");
                       }
                   }
                });
            },
            cancelValue: '取消',
            cancel: function () {}
        });
        d.show();

    };