<!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" onclick="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" onclick="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" onclick="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="#" onclick='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;}
