简易网页弹出层

浏览数：35 / 时间：2015年06月09日

今天写了一个简易的弹出层，为了以后工作能够重复使用，特地整理了一下。

首先，添加弹出层，赋id为tip_box
<div id="tip_box">
　　<div id="close_box">x</div>
　　<p>弹出层内容</p>
</div>

在HTML中调用box()函数

不需要单独的样式设置，以下为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         };