简易网页弹出层
今天写了一个简易的弹出层，为了以后工作能够重复使用，特地整理了一下。
首先，添加弹出层，赋id为tip_box
<div id="tip_box" style="display:none;">
<div id="close_box">x</div>
<p>弹出层内容</p>
</div>
在HTML中调用box()函数
<a href="javascript:void(0)" onclick="box()"></a>
不需要单独的样式设置，以下为javascript源码
1 function box() { 2 var tip_box=document.getElementById("tip_box") //获取弹出层ID 3 var wrap_box=document.createElement("div") //创建遮罩层节点 4 var close_box=document.getElementById("close_box") //获取关闭按钮ID 5 var tip_box_w=400 //弹出层宽度 6 var tip_box_h=200 //弹出层高度 7 var tip_box_background="#fff" //弹出层背景颜色 8 var tip_box_x=(innerWidth-tip_box_w)/2 //弹出层横坐标 9 var tip_box_y=(innerHeight-tip_box_h)/2 //弹出层纵坐标 10 var wrap_box_w=innerWidth //遮罩层宽度 11 var wrap_box_h=innerHeight //遮罩层高度 12 wrap_box.style.position="fixed"; 13 wrap_box.style.background="rgba(0,0,0,0.5)"; 14 wrap_box.style.width=wrap_box_w+"px"; 15 wrap_box.style.height=wrap_box_h+"px"; 16 wrap_box.style.zIndex=98; 17 wrap_box.style.top=0+"px"; 18 close_box.style.position="absolute"; 19 close_box.style.width=30+"px"; 20 close_box.style.height=30+"px"; 21 close_box.style.top=0+"px"; 22 close_box.style.right=0+"px"; 23 close_box.style.background="rgb(0,0,0)"; 24 close_box.style.color="rgb(255,255,255)"; 25 close_box.style.lineHeight=30+"px"; 26 close_box.style.textAlign="center"; 27 close_box.style.cursor="pointer"; 28 close_box.addEventListener("click",function(){ 29 tip_box.style.display="none"; 30 wrap_box.remove() 31 }) 32 tip_box.style.display="block"; 33 tip_box.style.width=tip_box_w+"px"; 34 tip_box.style.height=tip_box_h+"px"; 35 tip_box.style.zIndex=99; 36 tip_box.style.position="absolute"; 37 tip_box.style.top=tip_box_y+"px"; 38 tip_box.style.left=tip_box_x+"px"; 39 tip_box.style.background=tip_box_background; 40 document.body.appendChild(wrap_box) 41 };
