码迷,mamicode.com
首页 > Web开发 > 详细

简易网页弹出层

时间:2014-09-22 21:57:23      阅读:333      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   使用   java   ar   div   

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

首先,添加弹出层,赋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         };

简易网页弹出层

标签:style   blog   color   io   os   使用   java   ar   div   

原文地址:http://www.cnblogs.com/rongran/p/3986759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!