基於jquery實現頁面loading加載效果

實現loading 加載提示 ······ 透明遮罩 居中效果

具體代碼以下：

CSS樣式部分：

<style type="text/css">
.background { 
    display: block; 
    width: 100%; 
    height: 100%; 
    opacity: 0.4; 
    filter: alpha(opacity=40); 
    background:while; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2000; 
} 
.progressBar { 
    border: solid 2px #86A5AD; 
    background: white url(${pageContext.request.contextPath}/static/image/progressBar_m.gif) no-repeat 10px 10px; 
} 
.progressBar { 
    display: block; 
    width: 160px; 
    height: 28px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: -74px; 
    margin-top: -14px; 
    padding: 10px 10px 10px 50px; 
    text-align: left; 
    line-height: 27px; 
    font-weight: bold; 
    position: absolute; 
    z-index: 2001; 
} 
</style>

HTML部分：

<div id="background" class="background" style="display: none; "></div> 
<div id="progressBar" class="progressBar" style="display: none; ">數據加載中，請稍等...</div> 

JS部分：

$(document).ready(function(){
    var ajaxbg = $("#background,#progressBar");
    $('#uploadCommodityTypeExcel').ajaxSubmit({
                url:'/navi_shellplus/shop/testTypeExcel',
                data:$('#uploadCommodityTypeExcel').serialize(),
                type:"POST",
                beforeSend:function()
                {  
                    ajaxbg.show(); 
                },
                success:function(msg)
                {
                    ajaxbg.hide(); 
                    alert(msg.resultMsg);
                },
                error:function(){
                    ajaxbg.hide(); 
                    alert("導入失敗!");
                }
            });
}

參考博客：http://www.jb51.net/article/28170.htm