弹出层
<!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; 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;
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>