用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( " 请求出错，请刷新页面并稍候再试！ " ) });
}

 

 

 

转载于:https://www.cnblogs.com/xhan/archive/2010/08/24/1807546.html