源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AlertBox 弹出层信息提示框效果实现步骤

  • 时间: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] 实例化时,必须有弹出层作为参数:
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方法显示和隐藏覆盖层。 [url=http://www.1sucai.cn/jiaoben/32404.html]打包下载地址[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部