JS弹出层
弹出层
<!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"); //创建一个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>