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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值