- 浏览: 59511 次
- 性别:
- 来自: 顺德
最新评论
-
liuxf1122:
不支持最新的IE9、10和11!修改了也不行,不知如何是好啊! ...
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
gongyeye:
$$E.addEvent( this._container, ...
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
kingliu:
很好,很强大,学习了
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布 -
lwkjob:
非常强大谢谢
图片延迟加载(按需加载)效果 -
zxh277100963:
判断ie版本 错误,我明细是IE8的判断出来是IE7
JavaScript 工具库:Cloudgamer JavaScript Library v0.1 发布
弹出层就是相对文档或窗口定位的一个层,一般用来显示提示信息、广告等内容,还可以配合覆盖层来锁定页面。
在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题。
此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新“包装”,程序也改成组件的结构。
兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
前台效果预览
完整实例下载
程序说明
【实现原理】
弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位,一般相对文档的定位用absolute就行了。
要随屏移动,即相对窗口定位,就用fixed定位。
这些实现起来都很简单,除了不支持fixed的ie6。
【兼容ie6的fixed】
由于ie6本身不支持fixed定位,只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置,像仿Lightbox效果那样。
后来有人发现还可以通过reflow“离奇”地实现。
但以上方法都有一个缺陷,滚动时弹出层会“发抖”,很不舒服(可以用缓动等来改善)。
想要不发抖,可以通过html和css的巧妙应用来实现,具体参考14px的介绍。
原理是用一个容器代替body,然后对不会动的body绝对定位。
看来很完美,但有一个致命的问题,这个方法需要修改html结构,会影响到相关的一些东西,例如window的scroll事件等。
程序中用了另一个方法,通过body的背景和expression来实现,下面是一个兼容的fixed效果:
以上代码能兼容ie6实现fixed,比较关键的是:
body的background-attachment必须是fixed;
把要fixed的元素设置绝对定位,并且用expression不断修正top/left。
具体原理我也不清楚,可能是body背景在fixed之后,会优先重绘expression的结果。
ps:expression里面必须用eval或加括号,才能不断触发运算(具体原因不明)。
关于这个方法的介绍可以看position: fixed in IE/win和修正IE6不支持position:fixed的bug等。
相比前面的方法,这个是比较完美的了,但也有一些问题,例如body的背景只能用fixed,使用expression资源消耗相对较大。
更大的问题是不能实现用百分比值或right/bottom来定位。
为了解决这个问题,程序使用了一个定位层,这个层用上面的方法实现fixed定位,尺寸跟窗口大小一样,并且位置重合,那么只要用一般的定位方法相对这个层定位,就能达到相对窗口定位的效果了。
兼容程序主要在RepairFixed对象中,首先设置body背景:
参考自DE的IE7.js,用"url(about:blank)"就不需要另外加图片。
再创建定位层:
由于窗口大小可能会改变,除了top/left外,width/height也需要用expression修正。
定位层还要设置"overflow:hidden",好处是不会因弹出层在document原来的范围外而自动扩大document。
ie6测试以下代码,document会随着下滚而不断扩大:
加上"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方法显示和隐藏覆盖层。
放到最上层的页面中
在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题。
此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新“包装”,程序也改成组件的结构。
兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
前台效果预览
完整实例下载
程序说明
【实现原理】
弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位,一般相对文档的定位用absolute就行了。
要随屏移动,即相对窗口定位,就用fixed定位。
这些实现起来都很简单,除了不支持fixed的ie6。
【兼容ie6的fixed】
由于ie6本身不支持fixed定位,只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置,像仿Lightbox效果那样。
后来有人发现还可以通过reflow“离奇”地实现。
但以上方法都有一个缺陷,滚动时弹出层会“发抖”,很不舒服(可以用缓动等来改善)。
想要不发抖,可以通过html和css的巧妙应用来实现,具体参考14px的介绍。
原理是用一个容器代替body,然后对不会动的body绝对定位。
看来很完美,但有一个致命的问题,这个方法需要修改html结构,会影响到相关的一些东西,例如window的scroll事件等。
程序中用了另一个方法,通过body的背景和expression来实现,下面是一个兼容的fixed效果:
<!DOCTYPE html> <html> <head> <style> body { _background: url(about:blank) fixed; } .fixable { position:fixed; top:100px; _position:absolute; _top:expression((document).documentElement.scrollTop+100); } </style> </head> <body style="height:1500px;"> <div class="fixable">fixable</div> </body> </html>
以上代码能兼容ie6实现fixed,比较关键的是:
body的background-attachment必须是fixed;
把要fixed的元素设置绝对定位,并且用expression不断修正top/left。
具体原理我也不清楚,可能是body背景在fixed之后,会优先重绘expression的结果。
ps:expression里面必须用eval或加括号,才能不断触发运算(具体原因不明)。
关于这个方法的介绍可以看position: fixed in IE/win和修正IE6不支持position:fixed的bug等。
相比前面的方法,这个是比较完美的了,但也有一些问题,例如body的背景只能用fixed,使用expression资源消耗相对较大。
更大的问题是不能实现用百分比值或right/bottom来定位。
为了解决这个问题,程序使用了一个定位层,这个层用上面的方法实现fixed定位,尺寸跟窗口大小一样,并且位置重合,那么只要用一般的定位方法相对这个层定位,就能达到相对窗口定位的效果了。
兼容程序主要在RepairFixed对象中,首先设置body背景:
if (body.currentStyle.backgroundAttachment !== "fixed") { if (body.currentStyle.backgroundImage === "none") { body.runtimeStyle.backgroundRepeat = "no-repeat"; body.runtimeStyle.backgroundImage = "url(about:blank)"; } body.runtimeStyle.backgroundAttachment = "fixed"; }
参考自DE的IE7.js,用"url(about:blank)"就不需要另外加图片。
再创建定位层:
layer = document.createElement("<div style='position:absolute;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:block;'>");
由于窗口大小可能会改变,除了top/left外,width/height也需要用expression修正。
定位层还要设置"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定位时,计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。
使用说明
实例化时,必须有弹出层作为参数:
new AlertBox("idBox");
可选参数用来设置程序的默认属性,包括:
属性: 默认值//说明
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方法显示和隐藏覆盖层。
评论
14 楼
arienya
2011-02-15
有没有方法让窗口在触发它的按钮旁边弹出?
13 楼
arienya
2011-02-15
是否应该加两个属性用于定位打开窗口相对于屏幕的位置。
12 楼
cloudgamer
2010-10-18
tonywong205 写道
可惜不能遮罩住frameset中另外的网页,有谁有好的办法,麻烦通知我。谢谢~
放到最上层的页面中
11 楼
tonywong205
2010-10-17
可惜不能遮罩住frameset中另外的网页,有谁有好的办法,麻烦通知我。谢谢~
10 楼
pengyanqing
2010-10-16
楼车牛人啊..
9 楼
netbuddy
2010-10-15
楼主JS大牛
8 楼
www88485400
2010-10-14
挺好的 先打个标有空再看
7 楼
colver
2010-10-14
e? 不熟悉这个网站 哈哈 居然把原文弄出来了 不好意思
6 楼
colver
2010-10-14
cloudgamer 写道
弹出层就是相对文档或窗口定位的一个层,一般用来显示提示信息、广告等内容,还可以配合覆盖层来锁定页面。
在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题。
此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新“包装”,程序也改成组件的结构。
兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
前台效果预览
完整实例下载
程序说明
【实现原理】
弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位,一般相对文档的定位用absolute就行了。
要随屏移动,即相对窗口定位,就用fixed定位。
这些实现起来都很简单,除了不支持fixed的ie6。
【兼容ie6的fixed】
由于ie6本身不支持fixed定位,只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置,像仿Lightbox效果那样。
后来有人发现还可以通过reflow“离奇”地实现。
但以上方法都有一个缺陷,滚动时弹出层会“发抖”,很不舒服(可以用缓动等来改善)。
想要不发抖,可以通过html和css的巧妙应用来实现,具体参考14px的介绍。
原理是用一个容器代替body,然后对不会动的body绝对定位。
看来很完美,但有一个致命的问题,这个方法需要修改html结构,会影响到相关的一些东西,例如window的scroll事件等。
程序中用了另一个方法,通过body的背景和expression来实现,下面是一个兼容的fixed效果:
以上代码能兼容ie6实现fixed,比较关键的是:
body的background-attachment必须是fixed;
把要fixed的元素设置绝对定位,并且用expression不断修正top/left。
具体原理我也不清楚,可能是body背景在fixed之后,会优先重绘expression的结果。
ps:expression里面必须用eval或加括号,才能不断触发运算(具体原因不明)。
关于这个方法的介绍可以看position: fixed in IE/win和修正IE6不支持position:fixed的bug等。
相比前面的方法,这个是比较完美的了,但也有一些问题,例如body的背景只能用fixed,使用expression资源消耗相对较大。
更大的问题是不能实现用百分比值或right/bottom来定位。
为了解决这个问题,程序使用了一个定位层,这个层用上面的方法实现fixed定位,尺寸跟窗口大小一样,并且位置重合,那么只要用一般的定位方法相对这个层定位,就能达到相对窗口定位的效果了。
兼容程序主要在RepairFixed对象中,首先设置body背景:
参考自DE的IE7.js,用"url(about:blank)"就不需要另外加图片。
再创建定位层:
由于窗口大小可能会改变,除了top/left外,width/height也需要用expression修正。
定位层还要设置"overflow:hidden",好处是不会因弹出层在document原来的范围外而自动扩大document。
ie6测试以下代码,document会随着下滚而不断扩大:
加上"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方法显示和隐藏覆盖层。
在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题。
此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新“包装”,程序也改成组件的结构。
兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
前台效果预览
完整实例下载
程序说明
【实现原理】
弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位,一般相对文档的定位用absolute就行了。
要随屏移动,即相对窗口定位,就用fixed定位。
这些实现起来都很简单,除了不支持fixed的ie6。
【兼容ie6的fixed】
由于ie6本身不支持fixed定位,只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置,像仿Lightbox效果那样。
后来有人发现还可以通过reflow“离奇”地实现。
但以上方法都有一个缺陷,滚动时弹出层会“发抖”,很不舒服(可以用缓动等来改善)。
想要不发抖,可以通过html和css的巧妙应用来实现,具体参考14px的介绍。
原理是用一个容器代替body,然后对不会动的body绝对定位。
看来很完美,但有一个致命的问题,这个方法需要修改html结构,会影响到相关的一些东西,例如window的scroll事件等。
程序中用了另一个方法,通过body的背景和expression来实现,下面是一个兼容的fixed效果:
<!DOCTYPE html> <html> <head> <style> body { _background: url(about:blank) fixed; } .fixable { position:fixed; top:100px; _position:absolute; _top:expression((document).documentElement.scrollTop+100); } </style> </head> <body style="height:1500px;"> <div class="fixable">fixable</div> </body> </html>
以上代码能兼容ie6实现fixed,比较关键的是:
body的background-attachment必须是fixed;
把要fixed的元素设置绝对定位,并且用expression不断修正top/left。
具体原理我也不清楚,可能是body背景在fixed之后,会优先重绘expression的结果。
ps:expression里面必须用eval或加括号,才能不断触发运算(具体原因不明)。
关于这个方法的介绍可以看position: fixed in IE/win和修正IE6不支持position:fixed的bug等。
相比前面的方法,这个是比较完美的了,但也有一些问题,例如body的背景只能用fixed,使用expression资源消耗相对较大。
更大的问题是不能实现用百分比值或right/bottom来定位。
为了解决这个问题,程序使用了一个定位层,这个层用上面的方法实现fixed定位,尺寸跟窗口大小一样,并且位置重合,那么只要用一般的定位方法相对这个层定位,就能达到相对窗口定位的效果了。
兼容程序主要在RepairFixed对象中,首先设置body背景:
if (body.currentStyle.backgroundAttachment !== "fixed") { if (body.currentStyle.backgroundImage === "none") { body.runtimeStyle.backgroundRepeat = "no-repeat"; body.runtimeStyle.backgroundImage = "url(about:blank)"; } body.runtimeStyle.backgroundAttachment = "fixed"; }
参考自DE的IE7.js,用"url(about:blank)"就不需要另外加图片。
再创建定位层:
layer = document.createElement("<div style='position:absolute;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:block;'>");
由于窗口大小可能会改变,除了top/left外,width/height也需要用expression修正。
定位层还要设置"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定位时,计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。
使用说明
实例化时,必须有弹出层作为参数:
new AlertBox("idBox");
可选参数用来设置程序的默认属性,包括:
属性: 默认值//说明
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方法显示和隐藏覆盖层。
5 楼
colver
2010-10-14
很强 先保存下地址
4 楼
liushihua71632
2010-10-13
很好,学习了!
3 楼
binlaniua
2010-10-13
JS牛人 又来了。。。
2 楼
kjj
2010-10-13
做得不错,我用的是blockui
1 楼
libmw
2010-10-12
牛人又出新东西了啊!祝贺下下^^
发表评论
-
JavaScript 图片3D展示空间(3DRoom)
2010-09-20 09:59 1284一般的平面效果,通过 ... -
ccs3/滤镜/canvas的图片旋转/缩放/翻转变换效果
2010-08-21 13:48 1616以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然can ... -
SlideView 图片滑动(扩展/收缩)展示效果
2010-07-30 08:52 1209滑动展示效果主要用在 ... -
ImageZoom 图片放大效果(扩展篇)
2010-04-16 21:32 1216上一篇ImageZoom已经对图片放大效果做了详细的分析,这次 ... -
ImageZoom 图片放大效果
2010-04-07 21:03 1239这个效果也叫放大镜效果,最早好像在ppg出现的,之后就有了很多 ... -
图片延迟加载(按需加载)效果
2010-03-11 21:13 2823之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完 ... -
Lazyload 延迟加载(缓载)效果
2010-02-22 09:58 1495Lazyload是通过延迟加载 ... -
JavaScript 图片滑动展示效果
2008-05-13 01:34 1692看到jQuery实例:图片展示效果后,我也想拿来试试,但我不太 ... -
JavaScript 图片变换效果(ie only)
2008-05-23 12:02 2270仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换 ... -
JavaScript 图片滑动切换效果
2008-07-06 01:25 3162序一(08/07/06) 看到alibaba的一个图片切换效 ... -
JavaScript blog式日历控件
2008-08-23 00:25 1028近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那 ... -
JavaScript Table排序
2008-10-06 08:24 1038程序的实现的是在客户 ... -
JavaScript 日期联动选择器
2008-10-28 10:30 1203一个日期联动选择器, ... -
JavaScript 拖拉缩放效果
2008-12-03 09:07 757拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如 ... -
JavaScript 滑动条效果
2008-12-24 08:27 2460这个滑动条(拖动条) ... -
JavaScript Tween算法及缓动效果
2009-01-06 09:17 1132Flash做动画时会用到Tween类,利用它可以做很多动画效果 ... -
JavaScript 颜色梯度和渐变效果
2009-03-11 08:24 1029近来看了Dean的“Convert any colour va ... -
JavaScript Table行定位效果
2009-05-18 14:02 997近来有客户要求用table显示一大串数据,由于滚动后就看不到表 ... -
JavaScript 浮动定位提示效果
2009-07-07 08:23 1088本来想做一个集合浮动 ... -
JavaScript 多级联动浮动菜单 (第二版)
2009-08-10 00:54 1820上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能 ...
相关推荐
弹出层就是相对文档或窗口定位的一个层,一般用来显示提示信息、广告等内容,还可以配合覆盖层来锁定页面。
AlertBox弹出层,包括:悬对联广告 右下弹窗 拖动弹窗 居中 定位等效果!
内容索引:脚本资源,Ajax/JavaScript,弹出窗口 AlertBox 弹出层,也就是大家通常熟悉的弹出提示插件,它有几个功能:弹出右下角广告代码,弹出可关闭的对联广告等、弹出可拖动的弹窗、锁定屏幕、定位、居中等效果,...
AlertBox 弹出层,也就是大家通常熟悉的弹出提示插件,它有几个功能:弹出右下角广告代码,弹出可关闭的对联广告等、弹出可拖动的弹窗、锁定屏幕、定位、居中等效果,部分效果可从截图看出来。
AlertBox实用实例,很好用,呵呵,AlertBox实用实例
是一篇译文,实例分析制作自定义的信息提示框的实现代码
[AlertBox 弹出层(信息提示框)效果] () [JavaScript 图片3D展示空间(3DRoom)] () [图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)] () [SlideView 图片滑动(扩展/收缩)展示效果] () [ImageZoom 图片放大效果...
AlertBox.rar
diandian\弹框使用说明功能弹框组件特性提供自定义提示内容焦点管理可拖拽用法My_AlertBox为构造函数,需要new一个实例new My_AlertBox(string,callback)调用实例方法alertConfirm()可让弹框出现调用实例...
Yan Shi - ExtJS 4 Alert Box ExtJS 4 应用程序的可关闭警报框 用法 在您的应用程序文件中,请添加: Ext.Loader.setConfig({enabled: true})
警报框 在 Android 应用程序中使用警报框。 您只需要查看MainActivity.java(app/src/main/java/com/example/geenu/checkboxes)和activity_main.xml(app/src/main/res/layout)文件的代码。
弹出窗插件: 使用方法: 1、在head头部引入jQuery.js或者zepto.js [removed][removed] [removed][removed] 2、再在head头部引入默认的样式lz.ui.css <link rel="stylesheet" href="lz.ui.css" /> 3、直接调用 ...
PostbirdAlertBox.js 原生javascript弹框插件 在线体验: 更新 2018-07-08 修复由于 button focus 状态未清除导致的 enter 下重复触发的问题 ... 'content': '提示内容主体', 'okBtn': '好的', 'co
中原软件代理系统-警报框 CentaSoft Acenta Otomasyon Sistemi ile ilgilitümbildirimlerinizi buradan takip edebilirsiniz。 CentaSoft V4 ile网站上的网站。 Sistemiçerisindeyapacağınıztanımlarveritaban...
看到网易邮箱有很多漂亮的DIV提示效果,就照着它模仿做了一个例子。 包含方法有: <br>messageBox:function(_width,_height,_title,_message) <br>alertBox:function(_title,_message) <br>confirmBox:...
本文实例为大家分享了JavaScript实现alert弹框的具体代码,供大家参考,具体内容如下 因本人水平有限,不足之处还望大家指正。... alertbox : function(alertContent){ var windowWidth = window.innerWidth;
产品特点ScreenEditor检查器但是整个系统可以通过代码充分使用基于多层堆栈的导航(Alertbox> popup> main) 可重复使用的屏幕实例屏幕重复(弹出窗口,警报) 优化的干净,无膨胀代码,无需其他库防按键砸,屏幕...