|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
HTML5开发的网页文档类型极其简单，就够了，记得5年前还在反复跟团队强调使用XHTML那段冗长的文档类型声明.网页制造poluoluo文章简介：本教程旨在完成lightBox时的款式与举动分别，削减JS在各方面（全屏掩蔽、ie6中掩蔽select、双向居中、高度自顺应内容等）的事情。
[介入测试的扫瞄器：IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[操纵体系：Windows]
本教程旨在完成lightBox时的款式与举动分别，削减JS在各方面（全屏掩蔽、ie6中掩蔽select、双向居中、高度自顺应内容等）的事情。
先上代码：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>全屏屏障、主动居中的lightBox</title><styletype="text/CSS">*{margin:0;padding:0;}html,body{height:100%;overflow:hidden;font:12px/1.5simsun;}.myPage{line-height:3;overflow:auto;width:100%;height:100%;}.lightBox,.popupCover,.popupIframe,.popupComponent{position:absolute;left:0;top:0;width:100%;height:100%;}.popupComponent{z-index:2;display:none;}.popupIframe{display:none;_display:block;_filter:alpha(opacity=0);}.popupCover{background:#000;opacity:0.7;*filter:alpha(opacity=70);}.lightBox{text-align:center;overflow:auto;}.lightBoxContent{display:inline-block;*display:inline;zoom:1;width:300px;padding:10px;background:#fff;border:5pxsolid#00b4ff;vertical-align:middle;}.lightBoxMaxHeight{display:inline-block;vertical-align:middle;height:100%;*height:99.5%;width:1px;overflow:hidden;margin-left:-1px;}.lightBoxWrapper{display:inline-block;*display:inline;zoom:1;text-align:left;}.lightBoxClose{color:#f00;}.lightBoxSubmit{margin-top:10px;padding-top:5px;border-top:1pxsolid#ccc;}.lightBoxSubmitinput{font-size:12px;padding:010px;overflow:visible;margin:05px;}</style></head><body><divclass="popupComponent"id="lightBox"><iframeclass="popupIframe"></iframe><divclass="popupCover"></div><divclass="lightBox"><spanclass="lightBoxMaxHeight"></span><divclass="lightBoxContent"><divclass="lightBoxWrapper">当提醒小于一行时笔墨居中<br/></div><divclass="lightBoxSubmit"><inputtype="button"value="断定"onclick="hideLayer(lightBox)"/><inputtype="button"value="作废"onclick="hideLayer(lightBox)"/></div></div></div></div><divclass="popupComponent"id="lightBox2"><iframeclass="popupIframe"></iframe><divclass="popupCover"></div><divclass="lightBox"><divclass="lightBoxContent"><divclass="lightBoxWrapper">当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/>当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度当内容已凌驾了一屏的高度<br/></div><divclass="lightBoxSubmit"><inputtype="button"value="断定"onclick="hideLayer(lightBox2)"/><inputtype="button"value="作废"onclick="hideLayer(lightBox2)"/></div></div><spanclass="lightBoxMaxHeight"></span></div></div><divclass="myPage">伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/><divstyle="text-align:center;"><inputtype="button"value="位于第一屏的按钮"onclick="showLayer(lightBox)"/></div>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/><select><option>一个用于测试IE6中是不是能掩盖住的select</option></select><br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/><select><option>又一个用于测试IE6中是不是能掩盖住的select</option></select><br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/><divstyle="text-align:center;"><inputtype="button"value="位于第二屏中的按钮"onclick="showLayer(lightBox)"/><inputtype="button"value="当内容已凌驾了一屏的高度"onclick="showLayer(lightBox2)"/></div>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/></div><script>functionshowLayer(id){document.getElementById(id).style.display="block";}functionhideLayer(id){document.getElementById(id).style.display="none";}</script></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
这个lightBox具有以下特征，人人能够经由过程修正代码测一测^-^：
- 在页面中恣意一名置点开，均能完善遮屏（此时没法间接把持包含转动条在内的恣意元素），IE6中不必埋没即能掩蔽select元素（iframe掩蔽法的缺点：掩蔽后，假如拖动转动条，select仍会移至顶层）。
- lightBox的高度自顺应其内容，并出现完善的居中形态。
- 内容为单行时，居中显现；内容为多行时，居左显现；内容高度使lightBox凌驾屏高时出现转动条，并居顶显现，读者能完全浏览。
若有乐趣，组成这个lightBox的以下小技能可供您参详：
1.全屏掩蔽的办法：
A.埋没html/body的转动条。
B.用一个div做遮罩，再用一个div做带有转动条的页面，一个叠下面，一个叠上面。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>全屏掩蔽的办法</title><styletype="text/css">*{margin:0;padding:0;/*---复杂的cssreset，听说它的效力不高，请自行交换为高效的---*/}html,body{height:100%;/*---有了这个高度，IE6下，body的子工具设置height:100%才无效---*/overflow:hidden;/*---灭失落html或body发生的转动条---*/}.page{line-height:3;overflow:auto;/*---转动条就靠它了---*/width:600px;height:400px;background:#f60;/*---临时先做这么年夜，便利人人看分明---*/position:relative;left:50px;top:50px;/*---挪动一点点，便利人人看分明，把它往失落，遮罩的基础的效果就完成了---*/}.cover{position:absolute;width:600px;height:400px;background:#000;opacity:0.7;*filter:alpha(opacity=70);z-index:2;}</style></head><body><divclass="cover"></div><divclass="page">伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/>伪装很丰厚的内容<br/></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
网页制造poluoluo文章简介：本教程旨在完成lightBox时的款式与举动分别，削减JS在各方面（全屏掩蔽、ie6中掩蔽select、双向居中、高度自顺应内容等）的事情。
2.单行居中，多行居左的办法（看demo吧，表述才能无限）：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>单行居中，多行居左</title><styletype="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><divclass="outer"><divclass="inner">内容很少时</div></div><divclass="outer"><divclass="inner"><p>内容成段不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时不时</p></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
3.利用inline-block完成未知高度垂直居中的办法（看图和demo吧，表述才能无限）：
图示：
代码演示：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="Chomo"/><linkrel="start"href="http://www.14px.com"title="Home"/><title>未知高度垂直居中的办法</title><styletype="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:2pxsolid#f60;font-size:12px;background:#fff;position:relative;vertical-align:middle;}</style></head><body><divclass="lightBox"><br/><br/><br/><br/><br/></div><divclass="maxHeight"></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
存在的两个细节性成绩：
- 人人能够看到完全demo中并未呈现font-size:0;，而在垂直居中法中却呈现了。
由于font-size:0在完全demo中，将使firefox3.5中读者完全浏览时lightBox的鼠标滚轮生效，缘故原由，这一点人人能够作情处置。
- maxHeight这器材只能放在lightBoxContent的前面，由于在opera9.6中会呈现bug，濉
</p>
HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:20:38
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主