- 时间:2020-07-31 05:48 编辑: 来源: 阅读:
- 扫一扫,手机访问
摘要:AlertBox 弹出层信息提示框效果实现步骤
在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖动问题。
此外,还增加了一个用来兼容ie6的fixed的方法,覆盖层也重新“包装”,程序也改成组件的结构。
兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
效果预览 [url=http://demo.jb51.net/js/AlertBox/index.htm]http://demo.jb51.net/js/AlertBox/index.htm[/url]
[b]程序说明[/b]
[b]【实现原理】[/b]
弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位,一般相对文档的定位用absolute就行了。
要随屏移动,即相对窗口定位,就用fixed定位。
这些实现起来都很简单,除了不支持fixed的ie6。
[b]【兼容ie6的fixed】[/b]
由于ie6本身不支持fixed定位,只能模拟或取巧来间接实现。
最原始的方法是在window的scroll事件中不断修正弹出层的位置。
后来有人发现还可以[url=http://bbs.blueidea.com/thread-2938030-1-1.html]通过reflow“离奇”地实现[/url]。
但以上方法都有一个缺陷,滚动时弹出层会“发抖”,很不舒服(可以用缓动等来改善)。
想要不发抖,可以通过html和css的巧妙应用来实现,具体参考[url=http://bbs.blueidea.com/thread-2930592-1-1.html]14px的介绍[/url]。
原理是用一个容器代替body,然后对不会动的body绝对定位。
看来很完美,但有一个致命的问题,这个方法需要修改html结构,会影响到相关的一些东西,例如window的scroll事件等。
程序中用了另一个方法,通过body的背景和expression来实现,下面是一个兼容的fixed效果:
[url=http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html]定位提示效果[/url]那样预设定位的话,可以自行扩展。
[b]【锁定键盘】[/b]
使用覆盖层时,为了防止用户通过键盘操作页面,可以在document的keydown中执行preventDefault来禁用。
如果弹出层需要正常操作,只要在弹出层的keydown中执行stopPropagation就行了。
[b]【拖动弹窗】[/b]
这里只是简单的加上拖动功能,要注意的是fixed定位时,计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个[url=http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html]拖动效果[/url]。
[b]使用说明[/b]
实例化时,必须有弹出层作为参数:
可选参数用来设置程序的默认属性,包括:
属性: 默认值//说明
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方法显示和隐藏覆盖层。
[url=http://www.1sucai.cn/jiaoben/32404.html]打包下载地址[/url]