基于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"   //自定义的加载图片

　　});

二、全局遮罩层实现

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');

　　　　...

　　}

});