前言

本篇部落格為轉載！！！
特此宣告：
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