轉自：https://blog.csdn.net/baidu_30809315/article/details/83900255
gif動態圖下載地址：http://blog.sina.com.cn/s/blog_4ad042e50102ek2v.html
方式一：
1、在html的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});
方式二（添加圖片loader.gif）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩層DEM</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.loading {
background: #00000040 url(loader.gif) no-repeat center 50%;
z-index: 9999;
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<h2>遮罩層DEMO</h2>
<!-- 按鈕觸發模態框 -->
<button onclick="startup()">遮罩層</button>
<!-- 遮罩層模態框（Modal） -->
<div class="modal fade loading"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
data-backdrop="static"
data-keyboard="false">
// data-backdrop="static" data-keyboard="false" // 以上屬性是靜止掉了模態框的關閉按鈕和點擊空白處關閉模態框
</div>
</div>
<script>
function startup() {
$("#myModal").modal('show');
setTimeout('shutdown()', 5000);
}
function shutdown() {
$("#myModal").modal('hide');
}
</script>
</body>
</html>