第一次手机网站建设遇到的问题与知识归纳（一）弹出遮罩、meta内容含义

<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>//横屏时使用的样式

功能块：

（1）点击按钮弹出div，遮罩效果

jq代码：主要是实现点击按钮实现样式display的值为block或none

$(document).ready(function(){
$("#lay").click(function(){
$("#brg").css("display","block");
$("#showdiv").css("display","block");
});
$("#close").click(function(){
$("#brg").css("display","none");
$("#showdiv").css("display","none");
});
});

html：

原理为在被遮罩层上添加一个隐藏的id="brg"的宽高为100%的DIV层，点击某按钮时显示该层，以达到被遮罩层无法点击，实现失去焦点的效果。被弹出层（确定窗口）设置其Z轴位置：Z-INDEX为最高即可。

<div id="brg"></div>
<div id="showdiv" class="bor_radius4">
<p class="mart30">确认收货吗？</p>
<div class="btn_t fl mart30">
<div class="btn"><a href="#">
<span class="con_btn_6 fl bor_radius4 fn16 rel border_2">
<span>确定</span></span></a>
</div>
<div class="btn"><a href="#" id="close">
<span class="con_btn_6 fl bor_radius4 fn16  border_2 rel">
<span >取消</span></span></a>
</div>
</div>
</div>
<a href="#" id="lay">
<span class="con_btn bg_color fl bor_radius4 fn16 white">确定</span>
</a>

css样式：

#brg{width:100%; height:100%; background:#333; position:absolute; top:0; left:0; filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6;  display:none;}
#showdiv{ width:85%; height:140px; position:absolute; left:-10px;top:35px; z-index:20; display:none;background-color:#F9F9F9;border:10px solid #B7B7B7; padding:5px; }

css中核心属性为

#brg{display:none}

#showdiv{z-index:20}