复制代码 代码如下:

/*

模态遮罩层单例对象

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

$(document.body).ajaxStart(function() { overlay.show(); });

$(document.body).ajaxSuccess(function() { overlay.close(); });

$(document.body).ajaxError(function() { Q.alert("请求出错，请刷新页面并稍候再试！") });

}