遮挡层代码

来源：互联网发布：易打单软件编辑：程序博客网时间：2024/06/08 20:19

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

阅读全文

0 0