基于bootstrap模态框、fakeLoader实现全局遮罩层

一、fakeLoader.js介绍

fakeLoader.js 是轻量级的 jQuery 插件，帮助你创建动态的全屏加载掩饰微调效果，模拟页面预加载的效果。

插件下载地址：https://github.com/joaopereirawd/fakeLoader.js

效果演示：

使用方法：

1.引入CSS 

<link rel="stylesheet" href="../node_modules/dist/fakeLoader.min.css">

2.引入javascript依赖

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="../node_modules/dist/fakeLoader.min.js">

3.html中引入fakeLoader

<div class="fakeLoader"></div>

　　4.fakeLoader初始化

　　$.fakeLoader({
　　　　timeToHide: 31536000000,                    //加载效果的持续时间
　　　　zIndex: "9999",
　　　　spinner: "spinner3",                        //可选值 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 对应有7种效果
　　　　bgColor: "#34495E",                         //加载时的背景颜色
　　　　imagePath: "yourPath/customizedImage.gif"   //自定义的加载图片
　　});

扫描二维码关注公众号，回复： 8143243 查看本文章

二、全局遮罩层实现

 1.bootstrap modal fade

　　<div class="modal fade" id="loadingModal">
　　　　<div style="width: 200px;height:20px; z-index: 9999; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
　　　　　　<div class="fakeLoader"></div>
　　　　</div>
　　</div>

　　2.modal fade点击空白处遮罩层不会消失，按Tab键遮罩层不会消失

　　$("#loadingModal").modal({backdrop:'static', keyboard:false});

　　3.实现代码

$("#loadingModal").modal('show');
//使点击空白处遮罩层不会消失，按Tab键遮罩层不会消失 ，默认值为true
$("#loadingModal").modal({backdrop:'static', keyboard:false});
//请求
$.ajax({
　　...
　　async: true,
　　...　　
　　success: function (data) {
　　　　$("#loadingModal").modal('hide');
　　　　...
　　}
});