為頁面添加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.結果