容易的JS Loading弹出层-JavaSript-爱易网页

容易的JS Loading弹出层

日期：2014-05-16　浏览次数：20290 次

简单的JS Loading弹出层



<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"> 
</head> 
<script>	

	//层的id
	var loadingDivId  = "loading_div";
	
	//创建或显示loading层
	function showLoadingDiv()
	{
		var div = document.getElementById(loadingDivId);
		if(!div)
		{
				div  = document.createElement("DIV");	
				with(div)
				{
					id = loadingDivId;			
					//如果能搞个类似FF转动的小图片就更ok了。 			
				  innerHTML = "<br/><br/><br/><br/>Loading";
				  style.position  = "absolute";
				  style.zIndex  = "9999";
				  style.backgroundColor="#7B68EE";
				  style.width="210px";
				  style.height="200px";
				  style.top = "2";
				  style.left = "5";		
				  style.textAlign="center";	 			
				  //DIV透明度	 		  	  
				style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)";	 		  
				}
				document.body.appendChild(div);
		}
		div.style.display="block";			 			 
	}
	//隐藏loading层
	function hiddenLoadingDiv()
	{
		var div = document.getElementById(loadingDivId);
		if(div)
			div.style.display="none";
	}
</script>
  <body>  
		<input id="y"  value="YHEF" />
		<input type="button" id="openBtn" value="Open" onclick="showLoadingDiv();"/>
		<span  style="width:100px;"/>
		<input type="button" id="hiddenBtn" value="Hidden" onclick="hiddenLoadingDiv();"/>
  </body> 
</html>

效果图：