弹出层的静态界面和动态效果（弹出关闭）

今天真是觉得自己弱爆了，弹出层的动态效果（点击按钮出现，点击右上角X关闭或者遮罩层关闭）竟然弄了那么久才知道出了什么问题，老司机请让路，新手可以看一下。。超级简单的事情，唉=-=

首先是静态界面一般有三个主体：

1.按钮，点击触发弹出时间；

2.弹出层，右上角一般有个X可以点击关闭，或者底下有个确定按钮；

3.遮罩层，在弹出的时候避免和网页页面内容混淆。

按钮部分就不说了，任何元素都可以触发弹出事件。

弹出层和遮罩层：作为一个总体，用一个div括起来，css里面默认display:none;我这里做的是一个充值层：

<div class="chongzhi" ><div class="mask"></div><div class="cz"><div class="titlef"><span class="titlefont">充值</span><a href="javascript:void(0)" class="close" title="关闭"></a></div></div></div>

遮罩层：设置fixed，宽高都为100%，（IE6中的fixed可能出问题，要设absolute，记得设置top,left，如果有个height对IE6更好)。

             之后设置背景 颜色一般是灰色或者黑色，再加个透明度。再设一个z-index让他在上方。单独显示这个遮罩层可以看到透明的全屏效果。

弹出层主体：设置好   宽w(待会还会有用)   高h    背景颜色等，然后设fixed属性，top=50%,left=50%,

                      然后加上margin-top,这个值的大小是:二分之一高h;  

                      同理加上margin-left,这个值的大小是:二分之一宽w;

                      最后是一定要让z-index比遮罩层大，比如设个999;

                      可以显示出来总体看下效果  .

<div class="cz"><div class="titlef"><span class="titlefont">充值</span><a href="javascript:void(0)" class="close" title="关闭"></a></div></div>

注意一点，a标签，这里一定要在href里加上javascript:void(0),否则每次点击都会刷新页面！！！后面再设什么事件都没有效果了~

好，下面开始写效果了：直接上代码

<script type="text/javascript">document.getElementsByClassName("p3")[0].onclick=function(){ document.getElementsByClassName("chongzhi")[0].style.display="block";}document.getElementsByClassName("close")[0].onclick=document.getElementsByClassName("mask")[0].onclick=function(){   document.getElementsByClassName("chongzhi")[0].style.display="none";}</script>

比如按钮的class为p3,那么我get到p3后一定要加【0】，因为getElementByClassName得到的数组，我现在只要一个。

然后给他的style里的display设为block;

然后是获取close的style,还有遮罩层的style,添加点击事件，display设为block;

如果不想点击空白处（遮罩层）的时候显示关闭的话，就去掉这一块。

如果，弹出之后不想要底层页面还能滚动呢（一定要弹出层关闭后才能滚动）

给弹出那个function加上这一句：

 document.body.style.overflow = "hidden";

总之没有什么难点，记得a标签的href加上void0就是了。。。