首页 > 代码库 > 简易网页弹出层

简易网页弹出层

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

首先,添加弹出层,赋id为tip_box
<div id="tip_box">
  <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         };

简易网页弹出层