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

Javascript
vml圆角矩形最简布局
DOM精简教程
[换皮肤程序]一个比较使用的脚本程序
JS中style属性
Google Suggest ;-) 基于js的动态下拉菜单
jQuery 1.0.2
PJ Blog插件-防刷新的在线播放器
使javascript也能包含文件
Dron右键菜单 v1.0
HTML里select的CSS样式的改变
仿Google和Windows Live的拖拽
"好玩的放大镜效果" 的另一种实现方法
xWin之JS版
bcastr2.0 通用的图片浏览器
addRule在firefox下的兼容写法
JS日历 推荐
用脚本调用样式的几种方法
不错的新闻标题颜色效果
用JavaScript获取网页中的js、css、Flash等文件
用js+xml自动生成表格的东西

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 136 ::
收藏到网摘: 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,囧。