弹出框lightBox


弹出框的原理是一个弹出层,然后下面还有一个屏蔽层,屏蔽鼠标点击,下面是我自己写的一个弹出层代码:

.popBg{ background:#000; opacity:0.5; filter:alpha(opacity=50);height:100%; width:100%; position:fixed; _position:absolute; left:0px; top:0px; z-index:99;}
.popWrap{ position:fixed; _position:absolute; left:50%; margin-left:-300px; top:300px; width:600px; z-index:100;}

popBg就是一个屏蔽层,背景为黑色,当然你可以设定你白色,或者“鸭屎绿”,这个看个人喜好,然后设置不透明度opacity这个ff等现代浏览器都可以读到,所以没有必要写-moz-opacity,我看到群里有人写一句,是多余的,应该删除冗余代码;ie的话用fliter来兼容半透明。

定位可以用绝对定位还有相对定位来确定:
绝对定位的时候,当页面过长,滚动鼠标的时候,因为height是100%截取当前文档显示区域来定高的,所以鼠标滑动下面的区域没有给覆盖到,会出现断层很难看,用fixed的话就是把层“绑”在浏览器上一样,这样屏蔽层不会随着滚动条滚动;可惜IE6不支持fixed但是它解析absolute的时候却可以到达文档底部,所以加个hack给ie6,同时要设置它的层高z-index高些,这样就可以挡住其它的层起到屏蔽作用了。

popWrap是用来放弹出框的,定位的就不解释了,left:50%是让弹出框在左百分之五十的地方定位,用负margin来居中,至于负多少就要看弹出框的宽度而定,我打了600px宽给它,所以600/2=300,就要margin-left:-300px;左移300个像素这样就水平居中了


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3