HTML弹窗效果实现-优快云博客

弹出层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出层</title>
<style type="text/css">
*{padding:0; margin:0}
#popup{position:fixed; width:100%; height:100%; z-index:888; 
background:#666; filter:alpha(opacity=60);
 opacity: 0.6; display:none;}
 
 /*遮罩层样式*/
.popbox{position:absolute; display:none; padding:10px; 
border:5px #e2e2e2 solid; background:#FFF; 
width:400px; height:300px; z-index:995;
 left:50%; top:50%;}/*弹出层样式*/


</style>
</head>

<body>
	<div id="popup"></div>

	<a id="test1" href="javascript:viod(0);">弹窗</a>
	<div id="box1" class="popbox"></div>
	
	
	<script type="text/javascript">
		function popup(obj,wd,ht){
			var width=400,Heigth=300;//设置一个默认的高度
			Obj=document.getElementById(obj);
			if(wd!=undefined)
			{
				Obj.style.width=wd+"px";
			}
			else if(wd!=undefined&&ht!=undefined)
			{
				Obj.style.width=wd+"px";
				Obj.style.height=ht+"px";
			}
			else
			{
				obj.style.width=Width+"px";
				obj.style.height=Height+"px";
			}
			//添加关闭按钮和样式
			 //添加关闭按钮和样式
			 var closeNode=document.createElement("a"); //创建一个a标签
			 var Text=document.createTextNode("ｘ"); //创建一个X的文本
			 closeNode.style.position="absolute"; //位置绝对
			 closeNode.style.zIndex="999"; //Z-index超出
			 closeNode.style.right="7px"; //离右位置
			 closeNode.style.top="7px"; //离顶位置
			 closeNode.style.color="#666666"; //颜色
			 closeNode.style.padding="0 2px"; //内边距
			 closeNode.style.background="#e2e2e2"; //背景颜色
			 closeNode.style.cursor="pointer"; //光标样式
			 closeNode.appendChild(Text); //追加进来
			 
			 document.getElementById("popup").style.display="block"; //呈现
			 Obj.style.display="block";
			 Obj.style.marginLeft=-Obj.offsetWidth/2+"px";//计算水平居中
			 Obj.style.marginTop=-Obj.offsetHeight/2+"px";//计算垂直居中
			 Obj.appendChild(closeNode); //追加
			 closeNode.onclick=function(){
					Obj.style.display="none"; //隐藏
					document.getElementById("popup").style.display="none"; //隐藏
				}
		}
		
    document.getElementById("test1").onclick=function(){popup("box1","300","150");}//调用2
	</script>
</body>
</html>