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

Javascript
让innerHTML的脚本也可以运行起来
nextSibling
限制复选框的最大可选数
onpropertypchange
让焦点自动跳转
显示、隐藏密码
textarea是否自动换行
鼠标图片振动代码
对联浮动广告效果
一段实时更新的时间代码
让广告代码不再影响你的网页加载速度
载入进度条 效果
二级连动菜单
如何实现浏览器上的右键菜单
html代码调试脚本
表单提交验证类
简单实用的网页表格特效
表单的一些基本用法与技巧
Javascript - HTML的request类
教学演示-UBB,剪贴板,textRange及其他

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


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