实现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("导入失败!");
}
});
}