jquery overlay遮罩层实现代码

发布时间:2020-05-25编辑:脚本学堂
本文介绍了jquery实现overlay遮罩层的一段代码,掌握下jquery 遮罩层的实现方法,有需要的朋友参考下。

例子,jquery 遮罩层效果。
 

复制代码 代码示例:

/*
模态遮罩层单例对象
opacity:背景透明度
1. show()
2. close()
*/
Q.Overlay = function(opacity) {
var self = this;
self._createDiv = function() {

if (self._overlay) return;
self._overlay = $("<div></div>");

var overlayCss = {
'width': '100%',
'min-height': '100%',
'position': 'fixed',
'top': 0,
'left': 0,
'z-index': Q.Overlay.zindex,
'background': '#ccc',
'text-align': 'center',
'opacity': opacity
};

if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
overlayCss.position = "absolute";
overlayCss.height = Q.dom.pageHeight();
}
self._overlay.css(overlayCss);
$(document.body).append(self._overlay);
};
self.show = function() {
self._createDiv();
Q.Overlay.zindex++;
self._overlay.show();
};
self.close = function() {
self._overlay.hide();
self._overlay.remove();
self._overlay = undefined;
};
}
Q.Overlay.zindex = 1000;

例子,统一处理ajax请求中利用完全透明遮罩层组织用户和界面元素交换,当ajax出错时提示用户。
 

复制代码 代码示例:
/*统一ajax错误处理*/
Q.initAjaxErrorHandler = function() {
var overlay = new Q.Overlay(0.0); www.jb200.com
$(document.body).ajaxStart(function() { overlay.show(); });
$(document.body).ajaxSuccess(function() { overlay.close(); });
$(document.body).ajaxError(function() { Q.alert("请求出错,请刷新页面并稍候再试!") });
}