定位层还要设置"overflow:hidden",好处是不会因弹出层在document原来的范围外而自动扩大document。 ie6测试以下代码,document会随着下滚而不断扩大:
<!DOCTYPE html> <html> <head> <style> body { _background: url(about:blank) fixed; } .fixable { position:absolute; top:expression((document).documentElement.scrollTop+(document).documentElement.clientHeight); } </style> </head> <body> <div class="fixable">fixable</div> </body> </html>
加上"overflow:hidden"就可以防止这种情况。
然后弹出层通过append方法修改为"absolute"定位,并插入到这个定位层,这样就能实现fixed效果了。
由于这个定位层比较耗资源,所以在有元素插入时才会插到body中。 在不需要fixed的时候,要用remove方法从定位层中移除,当定位层内没有需要定位元素就会自动从body移除。 ps:隐藏的话expression还会继续执行,要移出文档才行。
【居中效果】
加入居中扩展程序,并且设置center为true,就会自动相对窗口居中。 居中的原理跟仿Lightbox效果是一样的,通过设置负的元素尺寸一半的margin和"50%"的top/left来居中。 要注意的是不是使用fixed定位时,计算需要加上scrollTop/scrollLeft。
【覆盖层】
在仿Lightbox效果中,ie6的覆盖层是通过创建一个覆盖整个页面的层来做的。 使用新的兼容fixed方法后,就不用另外做兼容,按照fixed的效果做就行了。 覆盖层是由AlertBox扩展而来,它其实就是一个大小跟窗口一样,并且跟窗口重合的弹出层。 由于覆盖层一般只需要定义一个就行了,这里把它做成一个OverLay对象,使用时直接调用它的show和close方法。
【遮盖select】
在仿Lightbox效果中介绍过两种遮盖select的方法:隐藏和iframe。 程序是通过iframe来遮盖的,放在ie6的兼容扩展程序中。 在iframe定位时要注意,要定位到弹出层的负的clientTop/clientLeft,这样才能保证边框不会被遮住。
使用技巧
【定位】
除了居中,程序会按照弹出层本身的定位样式来显示。 不是fixed定位时要注意,在ie6是相对当前窗口来定位的,其他都是相对第一屏窗口来定位的。 还要注意,必须声明DOCTYPE,才能正确定位。 程序为了尽量通用,降低了效率(用了4个expression),所以最好还是根据实际情况自己来调整。 ps:需要像定位提示效果那样预设定位的话,可以自行扩展。
【锁定键盘】
使用覆盖层时,为了防止用户通过键盘操作页面,可以在document的keydown中执行preventDefault来禁用。 如果弹出层需要正常操作,只要在弹出层的keydown中执行stopPropagation就行了。
【拖动弹窗】
这里只是简单的加上拖动功能,要注意的是fixed定位时,计算拖动的参考对象是不同的。 更详细的拖动介绍可以看看这个拖动效果。
使用说明
实例化时,必须有弹出层作为参数:
可选参数用来设置程序的默认属性,包括: 属性: 默认值//说明 fixed: false,//是否固定定位 zIndex: 1000,//层叠数 onShow: $$.emptyFunction,//显示时执行 onClose: $$.emptyFunction//关闭时执行
还提供了以下方法: show:显示弹出层; close:隐藏弹出层; dispose:销毁程序。
加入兼容ie6扩展程序后,会自动修正ie6的fixed问题,可根据fixSelect属性设置是否修正select遮盖bug,默认是。 加入居中扩展程序后,可根据center属性设置是否居中,默认否。
RepairFixed修正fixed对象,可独立使用,有append和remove方法添加和移除需要fixed的元素,只能在ie6使用。 OverLay覆盖层对象,有如下属性: 属性: 默认值//说明 "color": "#fff",//背景色 "opacity": .5,//透明度(0-1) "zIndex": 100,//层叠值 还有show和close方法显示和隐藏覆盖层。
打包下载地址
(责任编辑:admin) |