Copy codeThe Code is as follows:
/*
Modal mask layer singleton object
Opacity: Background transparency
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': '123 ',
'Min-height': '123 ',
'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;
The following is a small example of an application used to process ajax requests in a unified manner. The fully transparent mask layer is used to organize user and Interface Element exchanges. When an ajax error occurs, the user is prompted.
Code
Copy codeThe Code is as follows:
/* Unified ajax error handling */
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 ("request error. Please refresh the page and try again later! ")});
}