1.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>
2.HTML代码
代码如下(示例):
<div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; ">数据加载中,请稍等...</div>
3.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("导入失败!"); } }); }
效果图如下
加载图