bootstrap添加遮罩层loadingmask - 路修远而求索
转自：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" >
<div >
<div class="progress progress-striped active" >
<div class="progress-bar" ></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"
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>
