jquery的插件很多，这不是找jquery的遮罩层插件来，一搜一大堆。但是那个是好用而且简单的就不好说了。今天分享一个简单的jquery遮罩层插件：jqLoding.js。
全局遮罩效果
功能如下
1 可以全屏遮 用于提交数据时
2 局部遮，用于重复提交，只遮提交按钮，此功能当时在CSDN的登录中看到过，当时觉得还不错
3 遮罩上的提示文字可自己配置，因为操作的业务场景不一样，提示的信息肯定也会不一样
4 遮罩图片可配置，
5 信息提示层大小可配置
百度网盘下载demo：链接：http://pan.baidu.com/s/1i3eMUHZ 密码：gaud
需要了解的知识点大致如下
1 z-index属性
2 position属性
3 浏览器窗口与document 高宽的计算
4 jquery 插件格式
5 css 滤镜效果
为了减少引入的文件索性将css直接写在js中了
插件代码：
/**************************
*Desc:提交操作时遮罩
*Argument:type=0 全屏遮 1局部遮
*Author:Zery-Zhang
*Date:2014-09-18
*Version:1.0.0
**************************/
; (function ($) {
$.fn.jqLoading =function(option) {
var defaultVal = {
backgroudColor: "#ECECEC",//背景色
backgroundImage: "../../JScripts/Load/image/loading.gif",//背景图片
text: "正在加载中，请耐心等待....",//文字
width: 150,//宽度
height: 60,//高度
type:0 //0全部遮，1 局部遮
};
var opt = $.extend({}, defaultVal, option);
if (opt.type == 0) {
//全屏遮
openLayer();
} else {
//局部遮(当前对象应为需要被遮挡的对象)
openPartialLayer(this);
}
//销毁对象
if (option === "destroy") {
closeLayer();
}
//设置背景层高
function height () {
var scrollHeight, offsetHeight;
// handle IE 6
if ($.support.boxModel && $.support.leadingWhitespace) {
scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
if (scrollHeight < offsetHeight) {
return $(window).height();
} else {
return scrollHeight;
}
// handle "good" browsers
}
else if ($.support.objectAll) {
return $(document).height() - 4;
}
else {
return $(document).height()+500;
}
};
//设置背景层宽
function width() {
var scrollWidth, offsetWidth;
// handle IE
if ($.support.boxModel) {
scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
if (scrollWidth < offsetWidth) {
return $(window).width();
} else {
return scrollWidth;
}
// handle "good" browsers
}
else {
return $(document).width();
}
};
/*==========全部遮罩=========*/
function openLayer() {
//背景遮罩层
var layer = $("<div id='layer'></div>");
layer.css({
zIndex:9998,
position: "absolute",
height: height() + "px",
width: width() + "px",
background: "black",
top: 0,
left: 0,
filter: "alpha(opacity=30)",
opacity: 0.3
});
//图片及文字层
var content = $("<div id='content'></div>");
content.css({
textAlign: "left",
position:"absolute",
zIndex: 9999,
height: opt.height + "px",
width: opt.width + "px",
top: "50%",
left: "50%",
verticalAlign: "middle",
background: opt.backgroudColor,
borderRadius:"8px",
fontSize:"13px"
});
content.append("<img style='vertical-align:middle;margin:"+(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + opt.text + "</span>");
$("body").append(layer).append(content);
var top = content.css("top").replace('px','');
var left = content.css("left").replace('px','');
content.css("top",(parseFloat(top)-opt.height/2)).css("left",(parseFloat(left)-opt.width/2));
return this;
}
//销毁对象
function closeLayer() {
$("#layer,#content,#partialLayer").remove();
return this;
}
/*==========局部遮罩=========*/
function openPartialLayer(obj) {
var eheight = $(obj).css("height");//元素带px的高宽度
var ewidth = $(obj).css("width");
var top = $(obj).offset().top; // 元素在文档中位置 滚动条不影响
var left = $(obj).offset().left;
var layer = $("<div id='partialLayer'></div>");
layer.css({
style: 'z-index:9998',
position: "absolute",
height: eheight,
width: ewidth,
background: "black",
top: top,
left: left,
filter: "alpha(opacity=60)",
opacity: 0.6,
borderRadius:"3px",
dispaly: "block"
});
$("body").append(layer);
return this;
}
};
})(jQuery)
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src=".js/jquery-ui-jqLoding.js" type="text/javascript"></script>
<body>
<input type="button" id="btnOpen2" value="打开全局" />
<input type="button" id="btnClose2" value="关闭全局" />
<script type="text/javascript">
$(function () {
$("#btnOpen2").on("click", function () {
$.fn.jqLoading({ height: 100, width: 240, text: "正在加载中，请耐心等待...." });
setTimeout(function () {
$.fn.jqLoading("destroy");
}, 3000);
});
})
</script>
<input type="button" id="btnOpen" value="遮罩我" />
<input type="button" id="btnClose" value="关闭" />
<script type="text/javascript">
$(function () {
$("#btnOpen").on("click", function () {
//全局
//$(this).jqLoading();
//局部
$(this).jqLoading({ type: 1 });
});
$("#btnClose").on("click", function () {
$(this).jqLoading("destroy");
});
})</script>
</body>
我们可以在项目中，定义一个全局的ajax请求监控函数，在发起ajax请求的时候，自动启用遮罩层，等待界面所有ajax请求结束，则关闭遮罩层。这个功能我以前有写过一个文章。参考：[Jquery $.ajax请求详解及ajax全局变量分析]
http://www.suchso.com/UIweb/jquery-jqLoding-demo-down.html
转载请注明：有爱前端 » Jquery简洁遮罩层插件：jqLoding 演示及demo下载
