网站首页 > 网页设计教程 > WEB标准化 > 全屏屏蔽且自动居中的lightBox

全屏屏蔽且自动居中的lightBox

作者：互联网
时间：2009-07-27 17:14:47

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2 ]
[操作系统：Windows]

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

先上代码：

http://ww***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://ww***.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://ww***.org/1999/xhtml">http://ww***.org/1999/xhtml">

http://ww***px.com">http://ww***px.com" title="Home" />
全屏屏蔽、自动居中的lightBox

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

这个lightBox具备以下特性，大家可以通过修改代码测一测 ^-^：

在页面中任意一位置点开，均能完美遮屏（此时无法直接控制包括滚动条在内的任意元素），IE6中无须隐藏即能遮蔽select元素（iframe遮蔽法的缺陷：遮蔽后，如果拖动滚动条，select仍会移至顶层）。
lightBox的高度自适应其内容，并呈现完美的居中状态。
内容为单行时，居中显示；内容为多行时，居左显示；内容高度使lightBox超过屏高时呈现滚动条，并居顶显示，读者能完整阅读。

如有兴趣，构成这个lightBox的以下小技巧可供您参详：

1. 全屏遮蔽的方法：

A. 隐藏html/body的滚动条。
B. 用一个div做遮罩，再用一个div做带有滚动条的页面，一个叠上面，一个叠下面。

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

假装很丰富的内容
假装很丰富的内容
假装很丰富的内容
假装很丰富的内容

上一篇： WIndows系统下安装mysql-noinstall版本

下一篇： vertical-align表单元素垂直对齐

全屏屏蔽且自动居中的lightBox

相关阅读

人气下载推荐

相关应用

热门文章

推荐游戏