用jquery實現overlay遮罩層

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