Add an Ajax operation prompt to the page

To enhance the user experience, the "operation" prompt is displayed when an Ajax request is sent on the page. When Ajax ends, the "operation" prompt is hidden.

1. htmlCode

<! -- Ajax prompt layer -->
<Div class = "ajaxdiv" id = "ajaxdiv">
Operation ....
</Div>

2. Style

Div. ajaxdiv
{
Position: absolute;
Left: 0px;
Top: 0px;
Width: 100%;
Height: 100%;
Background: #567 URL (../images/loading.gif) No-repeat center;
Display: none;
Z-index: 9999;
Color: red;
Text-align: center;
Vertical-align: middle;
Font-size: 12px;
Line-Height: 100%;
}

3. JS Code

$. Ajaxsetup ({cache: false });
$ ("# Ajaxdiv"). ajaxstart (function (){
VaR H = $ (document). Height ();
Certificate (this).height(hsf-.css ({"opacity": 0.8, "line-height": H + 'px'}). Show ();
}). Ajaxstop (function (){
$ (This). Hide ();
});

4. Results