码迷,mamicode.com
首页 > Web开发 > 详细

ajax遮盖

时间:2015-08-18 18:18:35      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:

 1.HTML中div遮盖
<!-- 加载信息-->
					<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();
    });
});

 

 

 

ajax遮盖

标签:

原文地址:http://www.cnblogs.com/songwy/p/4739591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!