1, CSS style:
Copy Code code as follows:
@CHARSET "UTF-8";
* HTML. showbox,* HTML. Overlay {
Position:absolute;
Top:expression (eval (document.documentElement.scrollTop));
}
#AjaxLoading {
border:1px solid #8CBEDA;
Color: #37a;
font-size:12px;
Font-weight:bold;
}
#AjaxLoading Div.loadingword {
width:180px;
height:50px;
line-height:50px;
border:2px solid #D6E7F2;
Background: #fff;
}
#AjaxLoading img {
margin:10px 15px;
Float:left;
Display:inline;
}
. Overlay {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:998;
width:100%;
height:100%;
_padding:0 20px 0 0;
Background: #f6f4f5;
Display:none;
}
. showbox {
position:fixed;
top:0;
left:50%;
z-index:9999;
opacity:0;
Filter:alpha (opacity = 0);
Margin-left: -80px;
}
2, JS:
Copy Code code as follows:
/**
* Load Animation window
*
* @author Dendy
* @since 2013-7-19 10:13:05
*/
function getloadinghtml (msg) {
if (!msg) msg = "Load";
var html = "<div id= ' Loadingdiv ' >"
+ "<div style= ' height:1325px;" Display:none; opacity:0 ' class= ' overlay ' ></div> '
+ "<div style= ' opacity:0;" margin-top:250px ' id= ' ajaxloading ' class= ' Showbox ' > '
+ "<div class= ' Loadingword ' >"
+ "+ "</div>"
+ "</div>"
+ "<div style= ' height:1200px; ' ></div> "
+ "</div>";
return HTML;
}
function Ajaxloadinginit (msg) {
var loadingdiv = getloadinghtml (msg);
var h = $ (document). Height ();
$ (". Overlay"). CSS ({"Height": h});
var div = $ (' body '). Find ("#loadingDiv");
Div.remove ();
$ ("Body"). Append ($ (loadingdiv));
}
/**
* Start displaying loading, call before Ajax execution
* @param msg operation message, "Load", "Save", "delete"
*/
function Startloading (msg) {
Ajaxloadinginit (msg);
$ (". Overlay"). CSS ({' Display ': ' Block ', ' opacity ': ' 0.8 '});
$ (". Showbox"). Stop (true). Animate ({' margin-top ': ' 300px ', ' opacity ': ' 1 '},200);
}
/**
* Hidden after the completion of the load, called after the completion of Ajax execution (complete)
*/
function endloading () {
$ (". Showbox"). Stop (true). Animate ({' margin-top ': ' 250px ', ' opacity ': ' 0 '},400);
$ (". Overlay"). CSS ({' Display ': ' None ', ' opacity ': ' 0 '});
}
3. Call Example:
Copy Code code as follows:
Startloading ();
$.ajax ({
Type: "POST",
Url:this.url,
DataType: "JSON",
Data:this.args,
Success:function (data) {
},
Complete:function () {
if (self.showloading = = True) endloading ();
},
Error:this.error
});