标签:
<!-- 加载信息-->
<div class="framework-loading">
<div class="framework-loading-div">
<div class="framework-loading-label">
数据加载中,请耐心等待...
</div>
</div>
</div>
<div class="framework-masker"></div><!--此处为遮盖-->
2.对应的CSS样式
.framework-loading{ position: absolute; z-index: 1201; background: url(//initLoading.gif//此处为加载图片) repeat-x; border:#6593CF 1px solid; height:30px; top:50%; left:50%; margin-top:-16px; margin-left:-94px; } .framework-loading-div{ font-size: 14px; margin:2px; color: #1F1F1F; height: 24px; padding-left:12px; border: #A3BAD9 1px solid; background: white url(///loading.gif//此处为加载图片) no-repeat 2px 4px; } .framework-loading-label{ margin: 4px 7px 1px 8px; text-align:center; width:240px; font-size: 14px; } .framework-masker{ position: absolute; z-index: 1200; background-color: #ccc; filter:progid:DXImageTransform.Microsoft.alpha(opacity=50); opacity: .3; width:100%; height:100%; }
3.js中调用方法
$(function () { //Ajax加载提示 $(document).ajaxStart(function(){ $(".framework-loading").show(); $(".framework-masker").show(); }); $(document).ajaxStop(function(){ $(".framework-loading").hide(); $(".framework-masker").hide(); }); });
标签:
原文地址:http://www.cnblogs.com/songwy/p/4739591.html