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();    };

5.本文出自 “不编程，无生活” 博客，请务必保留此出处http://51coding.blog.51cto.com/6079322/1754415