遮挡层代码

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值