全屏屏蔽且自动居中的lightBox - 网页制作

　全屏屏蔽且自动居中的lightBox

作者：14px　时间： 2009-07-27　文档类型：原创　来自：蓝色理想

第 1 页全屏屏蔽且自动居中的lightBox [1]
第 2 页全屏屏蔽且自动居中的lightBox [2]

2. 单行居中，多行居左的方法（看demo吧，表述能力有限）：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>单行居中，多行居左</title> <style type="text/css"> * { margin:0; padding:0; } .outer { margin-top:20px; text-align:center;} .inner { display:inline-block; *display:inline; zoom:1; text-align:left;} </style> </head> <body> <div class="outer"> <div class="inner">内容很少时</div> </div> <div class="outer"> <div class="inner"> <p>内容成段时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时</p> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3. 使用inline-block实现未知高度垂直居中的方法（看图和demo吧，表述能力有限）：

图示：

代码演示：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>未知高度垂直居中的方法</title> <style type="text/css"> * { margin:0; padding:0;} html,body { height:100%; overflow:hidden; text-align:center; font-size:0; } .maxHeight { display:inline-block; *display:inline; *zoom:1; height:100%; width:10px; vertical-align:middle; background:#00b4ff; margin-left:-10px;} .lightBox { display:inline-block; *display:inline; *zoom:1; width:300px; border:2px solid #f60; font-size:12px; background:#fff; position:relative; vertical-align:middle;} </style> </head> <body> <div class="lightBox"> <br /><br /><br /><br /><br /> </div> <div class="maxHeight"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

存在的两个细节性问题：

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

经典论坛交流：
http://bbs.blueidea.com/thread-2941022-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6909.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页全屏屏蔽且自动居中的lightBox [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

Lightbox JS v2.0

新颖实用的显示图片效果

作者文章

更多作者文章

全兼容的纯CSS级联菜单要点浅析

ie6下实现position-fixed效果

表格外观的无序列表

div仿框架方法详解

层叠加的五条叠加法则


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule