html > 弹出框 有加载中loading...效果

 

<div id="dilog">
	<div id="dilog_in">
		<a href="Javascript:closeDialog()"><img src="<?PHP echo base_url(); ?>images/close.png" class="close_dialog" /></a>
		<iframe scrolling="auto" id="dialog" width="0px" height="0px"  frameborder="0" src=""  ></iframe>
	</div>
</div>
<script language="javascript">
	function dialog(w,h,src){
		$("#dilog").animate({ opacity: "show" }, "fast"); 
		$("#dialog").width(w);
		$("#dialog").height(h);
		var window_width = $(window).width();
		var pad_left = (window_width/2)-(w/2);
		if(pad_left <1){pad_left = 1;}
		$("#dilog").css("left",pad_left);
		$("#dialog").attr("src",src);
	}
	
	function closeDialog(){
		$("#dilog").animate({ opacity: "hide" }, "normal"); 
		$("#dialog").attr("src","");
	}
</script>
<style type="text/css">

	#dilog{
		display:none;
		background:url('../images/loading.gif') no-repeat center center #fff;
		position:absolute;	
		border:10px solid #555;
		-webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
		-moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
		box-shadow: rgba(0, 0, 0, 0.9) 0 0 3px; 
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;	
		top:50px;
		
	}
	#dilog_in{
		position:relative;	
	}
	#dilog .close_dialog{
		position:absolute;
		right:-40px;
		top:-40px;	
		width:50px;
		height:50px;
	}	
</style>