为页面添加ajax 操作提示

为增强用户体验，在页面发送ajax 请求时，出现"操作"提示，ajax 结束时，隐藏"操作"提示。

1.HTML 代码

<!--ajax提示层-->
<div class="ajaxDiv" id="ajaxDiv">
操作中....
</div>

2. 样式

div.ajaxDiv
{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:#567 url(../images/Loading.gif) no-repeat center center;
    display:none;
    z-index:9999;
    color:red;
    text-align:center;
    vertical-align:middle;
    font-size:12px;
    line-height:100%;
}

3.JS 代码

    $.ajaxSetup({cache:false});
    $("#ajaxDiv").ajaxStart(function () {
        var h = $(document).height();
        $(this).height(h).css({ "opacity": 0.8, "line-height": h + 'px' }).show();
    }).ajaxStop(function () {
        $(this).hide();
    });

4.结果