正文

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

IP云
IP云V管理员/7 阅读
08/08
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、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');
...
}
});