用jquery实现overlay遮罩层

时间：2010-08-24 来源：xhan

代码 /*
模态遮罩层单例对象
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("请求出错，请刷新页面并稍候再试！") });
}