首页 > 代码库 > 简易网页弹出层
简易网页弹出层
今天写了一个简易的弹出层,为了以后工作能够重复使用,特地整理了一下。
首先,添加弹出层,赋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 };
简易网页弹出层
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。