学步园

通常我们在加载iframe,或者ajax请求的时候需一个遮罩动画，我们可以这样处理，使用一个绝对定位的div，高度宽度100%,然后append的body中

具体代码可以参考如下

/**
 * Author:Zhang Qi
 * Create:2013-03-28
 * Function:在body中打开遮罩以及关闭
 * */
var LoadingUtils = {
		Open:function(){
			var top=  $(this).offset()==undefined?0:$(this).offset().top;
			var left=  $(this).offset()==undefined?0:$(this).offset().left;
			
			var appender=null;
			if($(this).parent().length==0)
			{
				appender="body";
			}else
			{
				appender=$(this);
			}
			$("<div class=\"mask\"></div>").css({
				display : "block",
				width : $(this).outerWidth(),//100%
				height : $(this).outerHeight(),//height
				top:top,
				left:left
			}).appendTo(appender);//body
			$("<div class=\"mask-msg\"></div>").html("正在处理，请稍候...")
					.appendTo(appender).css({
						display : "block",
						left : ($(this).outerWidth()-153) / 2+left,
						top :  ($(this).outerHeight()-42) / 2+top,
					});
		},
		Close:function(){
			$(".mask").remove();
			$(".mask-msg").remove();
		}
}

样式表

.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  filter: alpha(opacity=30);
  display: none;
  background: #eee;
}
.mask-msg {
  position: absolute;
  padding: 12px 5px 10px 30px;
  width: auto;
  height: 16px;
  border-width: 2px;
  border-style: solid;
  display: none;
  border-color: #ddd;
  font-size:12px;
  background: #fff url('loading.gif') no-repeat scroll 5px center;
}

如何调用

1.在DIV ww上显示遮罩

LoadingUtils.Open.call(document.getElementById("ww"));

2.遮罩住整个页面

<script type="text/javascript">
	$(document).ready(function() {
		LoadingUtils.Open.call(this);
	});
</script>

扩展=========>IFrame中

window.parent().LoadingUtils.Close();

从子窗中关闭父页的loading动画