加载中…弹出框lightBox
(2011-07-26 11:54:12)
标签：
lightbox弹出框透明兼容水平居中positionfixedopacityit |
分类： CSS |
弹出框的原理是一个弹出层，然后下面还有一个屏蔽层，屏蔽鼠标点击，下面是我自己写的一个弹出层代码：
.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个像素这样就水平居中了。
给多个例子大家参考：
http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html
.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个像素这样就水平居中了。
给多个例子大家参考：
http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html
喜欢
0
赠金笔