<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,user-scale=1.0,inital-scalable=1.0">
<!--可视区宽度等与设备的宽度,禁止缩放,缩放比例1:1-->
<meta name="App-config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<!--保留系统的一些配置(历史记录,动画效果,全屏)-->
<meta name="apple-mobile-web-app-capable" content="yes"><!--苹果专有的meta信息,允许网页以APP形式运行-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"><!--苹果专有的,头部bar的样式-->
<title>洗衣订单</title>
<link rel="stylesheet" type="text/css" href="css/gindex.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/index.js"></script>
<script src="js/jquery-1.12.2.js"></script>
<style>
//设置弹出层的位置,#alert-head 就是包裹遮挡层的div
#alert-head{ z-index: 3;position: absolute;display: none;width: 90%;cursor: pointer;left: .3rem;top: 3rem;}
</style>
<script>
//弹出层弹出时,body不能滚动,阻止页面默认事件,配合页面滚动事件使用
function bodyScroll(event){
event.preventDefault();
}
$(function(){
//点击需要弹出层按钮,弹出,页面不能滚动
$(".gindex-info").click(function(){
$("body").css("overflow-y","hidden");
document.body.addEventListener('touchmove',bodyScroll,false);
})
//#hidebox为遮挡层,遮挡层关闭,页面恢复,可以滑动
$("#hidebox").click(function(){
$("body").css("overflow-y","auto");
document.body.removeEventListener('touchmove',bodyScroll,false);
})
})
function choose2(){
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //显示隐藏层
hidebg.style.height=document.body.clientHeight+"px"; //设置隐藏层的高度为当前页面高度
document.getElementById("alert-head").style.display="block"; //显示弹出层
}
//弹出层默认为display:none;
function demo(){
hidebg.style.display="none";
document.getElementById("alert-head").style.display="none";
}
</script>
</head>
<body style="height:100%;">
//遮挡层html代码
<div id="hidebg" class="hidebg wmain"></div>
//遮挡层html代码结束
<div style="height:100%;"> <header> <ul class="fl back"> <a href="配送员首页.html"><img src="img/bank_03.png"/></a> </ul>
<ul class="fl word">洗衣订单</ul> </header> <div class="gstore"> <div class="gstore-span"> <span class="fl">订单编号:5245464864465</span> <span class="fr gstore-span1">取件中</span> </div> <div class="ginfo"> <div class="ginfo-address"> <div class="ginfo-tel"> <i></i>
<span>刘女士</span><span>18898681888</span> </div> <div class="ginfo-add"> <ul> <li> <span>订单编号:</span><span>65486545634564656 </span> </li> <li> <span>取货地址:</span> <span class="gspan-hidden">xxxxxxxxxxxx</span> </li> <li> <span>选择服务:</span> <span class="gspan-hidden">大衣类 清洗
</span> </li> </ul> </div> </div> <div class="ginfo-btn" id="ginfo-choose"> <a href="#" class="fr" οnclick="choose();" id="ginfo-btn-a">选择商品</a> </div> </div> </div> <div class="gstore"> <div class="gstore-span"> <span class="fl">订单编号:5245464864465</span>
<span class="fr gstore-span1">取件中</span> </div> <div class="ginfo"> <div class="ginfo-address"> <div class="ginfo-tel"> <i></i> <span>刘女士</span><span>18898681888</span> </div> <div class="ginfo-add"> <ul> <li> <span>订单编号:</span><span>65486545634564656 </span>
</li> <li> <span>取货地址:</span> <span class="gspan-hidden">xxxxxxxxxxxxxx </span> </li> <li> <span>选择服务:</span> <span class="gspan-hidden">大衣类 清洗 </span> </li> </ul> </div> </div> <div class="ginfo-btn" id="ginfo-choose"> <a href="订单详情.html" class="ginfo-choose-a">查看详情</a>
<a href="#" class="fr" οnclick="choose();" id="ginfo-btn-a">选择商品</a> </div> </div> </div> <div class="gstore"> <div class="gstore-span"> <span class="fl">订单编号:5245464864465</span> <span class="fr gstore-span1">取件中</span> </div> <div class="ginfo"> <div class="ginfo-address">
<div class="ginfo-tel"> <i></i> <span>刘女士</span><span>18898681888</span> </div> <div class="ginfo-add"> <ul> <li> <span>订单编号:</span><span>65486545634564656 </span> </li> <li> <span>取货地址:</span> <span class="gspan-hidden">北京市昌平区生命科学园珠江摩尔国际五号楼一单元 </span> </li>
<li> <span>选择服务:</span> <span class="gspan-hidden">大衣类 清洗 </span> </li> </ul> </div> </div> <div class="ginfo-btn" id="ginfo-choose"> <a href="订单详情.html" class="ginfo-choose-a">查看详情</a> <a href="#" class="fr" οnclick="choose();" id="ginfo-btn-a">选择商品</a> </div>
</div> </div> <!-- 弹出层开始 --><div class="alert-head clearfix" id="alert-head"> <img src="img/app_9.png" alt=""> <input type="text" placeholder="请输入手机号"> <div class="galert-btn"> <a href="#" οnclick='demo();' id="hidebox">取消</a> <a href="#">确认</a> </div></div><!--
弹出层结束 --></div></body></html>
另外补充遮挡层css代码
.hidebg{ position:absolute;left:0px;top:0px;
background-color:#000;
width:100%;
height:100%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
filter:alpha(opacity=60); /*设置透明度为60%*/
opacity:0.6; /*非IE浏览器下设置透明度为60%*/
display:none;
z-Index:2;
}
.wmain{position: fixed;}