代碼如下:
/*
模態遮罩層單例對象
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("請求出錯，請刷新頁面並稍候再試！") });
}