<span style="font-size:12px;"><meta http-equiv="Content-Type"content="text/html; charset=utf-8">//编码<meta id="viewport"name="viewport"content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/> <meta name=”apple-mobile-web-app-capable” content=”yes” />// 离线应用的另一个技巧 <meta name=”apple-mobile-web-app-status-bar-style” content=black” />// 隐藏状态栏 <meta content="black"name="apple-mobile-web-app-status-bar-style"/>//指定的iphone中safari顶端的状态条的样式 <meta content="telephone=no"name="format-detection"/>//告诉设备忽略将页面中的数字识别为电话号码<style media="all and (orientation:portrait)"type="text/css">#landscape { display: none; }</style>//竖屏时使用的样式<style media="all and (orientation:landscape)"type="text/css">#portrait { display: none; }</style>//横屏时使用的样式</span>效果图：
立即学习“前端免费学习笔记（深入）”；
html：
原理为在被遮罩层上添加一个隐藏的id="brg"的宽高为100%的DIV层，点击某按钮时显示该层，以达到被遮罩层无法点击，实现失去焦点的效果。被弹出层（确定窗口）设置其Z轴位置：Z-INDEX为最高即可。
立即学习“前端免费学习笔记（深入）”；
<span style="font-size:12px;"><div id="brg"></div><div id="showdiv"><div class="btn"><a href="#" id="close"><span >取消</span></span></a></div></div><a href="#" id="lay"><span>确定</span></a></span>
立即学习“前端免费学习笔记（深入）”；
#brg{width:100%; height:100%;filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6; display:none;}#showdiv{z-index:20; display:none; }
立即学习“前端免费学习笔记（深入）”；
2014-8-19:新的遮罩层实现方式：兼容ie6：
<div id="brg"></div><div class="vip_none"><div class="close_btn"><a href="javascript:void(0)" id="close_btn"><img src="images/close_btn.png" style="max-width:90%" style="max-width:90%" alt="弹出遮罩、meta内容含义_html/css_WEB-ITnose" ></a></div><p>VIP充值尚未开放<br><br> 敬请期待～</p></div>
*html { background: url(*) fixed; }body { _background: url(about:blank) fixed;}.vip_none{width: 400px;height: 250px;background:#fff;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius: 7px; z-index: 1002; display: none; position:absolute; top: 30%; left: 38%; overflow: auto; }.close_btn{height: 40px;background: #f2f2f2; -webkit-border-radius:7px 7px 0 0; -moz-border-radius:7px 7px 0 0; border-radius:7px 7px 0 0; -webkit-box-shadow: 0 1px #e0dfdf; -moz-box-shadow: 0 1px #e0dfdf; box-shadow: 0 1px #e0dfdf; margin: 1px 1px 0 1px;}.close_btn img{ float: right; margin-top: 8px; margin-right: 8px; border:0;}.vip_none p{ font-size: 32px; color: #505050; -webkit-text-shadow: 1px 0px #bbbbbb; -moz-text-shadow: 1px 0px #bbbbbb; text-shadow: 1px 0px #bbbbbb; text-align: center; margin-top: 60px; }#brg{ overflow: hidden; width:100%; height:100%; background:#ccc; position:fixed; top:0; left:0; filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6; display:none; z-index:1000; _position:absolute; _height:6100px; _width:2000px; _left:0; _top:0;}
立即学习“前端免费学习笔记（深入）”；
