当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实现lightBox时的样式与行为分离减少JS

Javascript
学习ExtJS(二) Button常用方法
学习ExtJS TextField常用方法
学习ExtJS Panel常用方法
学习ExtJS Window常用方法
学习ExtJS 访问容器对象
学习ExtJS border布局
学习ExtJS fit布局使用说明
学习ExtJS form布局
学习ExtJS accordion布局
学习ExtJS table布局
Javascript 日期处理之时区问题
JavaScript 监听textarea中按键事件
Javascript isArray 数组类型检测函数
JavaScript delete 属性的使用
防止动态加载JavaScript引起的内存泄漏问题
javascript Range对象跨浏览器常用操作
JavaScript 另类遍历数组实现代码
网页制作ajax特效实例
javascript修复浏览器中头痛问题
2008年关注基于JavaScript开发的产品

Javascript 中的 实现lightBox时的样式与行为分离减少JS


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 383 ::
收藏到网摘: n/a

本教程旨在实现lightBox时的样式与行为分离,减少JS在各方面(全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等)的工作。

[参与测试的浏览器:IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2 ]
[操作系统:Windows]
本教程旨在实现lightBox时的样式与行为分离,减少JS在各方面(全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等)的工作。
先上代码:

复制代码 代码如下:
2. 单行居中,多行居左的方法(看demo吧,表述能力有限):
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

3. 使用inline-block实现未知高度垂直居中的方法(看图和demo吧,表述能力有限):

图示:

代码演示:

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

存在的两个细节性问题:
大家可以看到完整demo中并未出现font-size:0;,而在垂直居中法中却出现了。
因为font-size:0在完整demo中,将使firefox3.5中读者完整阅读时lightBox的鼠标滚轮失效,原因不详,这一点大家可以作情处理。
maxHeight这东西只能放在lightBoxContent的后面,因为在opera9.6中会出现bug,囧。