<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}