网页页面蒙版实现
做手机端网页的时候，设计师做了这样一张图：
这个页面除了底层的布局，主要的工作是蒙版的实现，这种特效很常见到，淘宝改版的时候会弹出也是这种效果，引导剁手党熟悉新布局和功能，以便让他们更好的败家。还有好多app也有这种效果，多是领取每日任务之类的页面。
用处这么广泛，就想着实现下。分析：不考虑js效果的话，其实就是几层页面的关系。最底下是一层正常的网页，中间是一层灰色的蒙版，好了，蒙版上面是一层网页。层次大概这样。
想清楚了就开始做，主要利用css的position:absolute分层。先写底下的一层，做个最简单的点击弹出蒙版：
<section onclick="showMasking()" style="display:block; cursor:pointer">
弹出蒙板
</section>
开始写蒙版层：
<div id="masking-bg"> </div>
蒙版层上面的：
<div id="masking-layer"> <div class="close"onclick="closeMasking()"> <img src="assets/images/common/X.png"/> </div> <div class="masking-banner"> <img class="img-bg" src="assets/images/common/winning.png"/> <img class="img" src="assets/images/common/iphoneImg.png"/> <div style="font-size:10px;"><span>（第1愿 ）Apple iPhone6S Plus 64 颜色随机 唯一的不同，就是处处不同 </span></div> </div> <div class="skip"> <div class="index-sure font-13"> 确定 </div> </div> </div>
css:
<style type="text/css"> #masking-bg{background-color:#CCC; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; position: absolute; filter: alpha(opacity=80); opacity: 0.6;display: none;} #masking-layer{display: none;height:500px;width:100%;position:absolute;top:0;} #masking-layer div{position: absolute;z-index: 1000;} .close{left:80%;top:15%;z-index:1001 !important;} .close img{width:30px;} .masking-banner{top:10%;text-align:center;width:100%;} .masking-banner .img-bg{width:100%;} .masking-banner .img {position:absolute;z-index:1001;left:40%;top:35%;width:25%;} .masking-banner div{position:absolute;z-index:1001;left:25%;top:70%;width:50%;} .skip{left:38%; top:80%; color:#fff; text-align:center;width:100%;} .index-sure{background-color:#ce1c40;color:#FFF;padding:10px 20px;text-align: center;border-radius:5px;display:block;width:25%;} </style>
全部代码：
<html> <head> <meta charset="utf-8"/> <meta id="viewport" name="viewport" content="initial-scale=1.0,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="assets/css/style1.css?v=1.0"> <style type="text/css"> #masking-bg{background-color:#CCC; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; position: absolute; filter: alpha(opacity=80); opacity: 0.6;display: none;} #masking-layer{display: none;height:500px;width:100%;position:absolute;top:0;} #masking-layer div{position: absolute;z-index: 1000;} .close{left:80%;top:15%;z-index:1001 !important;} .close img{width:30px;} .masking-banner{top:10%;text-align:center;width:100%;} .masking-banner .img-bg{width:100%;} .masking-banner .img {position:absolute;z-index:1001;left:40%;top:35%;width:25%;} .masking-banner div{position:absolute;z-index:1001;left:25%;top:70%;width:50%;} .skip{left:38%; top:80%; color:#fff; text-align:center;width:100%;} .index-sure{background-color:#ce1c40;color:#FFF;padding:10px 20px;text-align: center;border-radius:5px;display:block;width:25%;} </style> </head> <body> <section onclick="showMasking()" style="display:block; cursor:pointer"> 弹出蒙板 </section> <div id="masking-bg"> </div> <div id="masking-layer"> <div class="close"onclick="closeMasking()"> <img src="assets/images/common/X.png"/> </div> <div class="masking-banner"> <img class="img-bg" src="assets/images/common/winning.png"/> <img class="img" src="assets/images/common/iphoneImg.png"/> <div style="font-size:10px;"><span>（第1愿 ）Apple iPhone6S Plus 64 颜色随机 唯一的不同，就是处处不同 </span></div> </div> <div class="skip"> <div class="index-sure font-13"> 确定 </div> </div> </div> <script src="assets/js/jquery.min.js"></script> <script> $('#masking-layer').height($(window).height()); function showMasking(){ $('#masking-bg').css('display','block'); $('#masking-layer').css('display','block'); } function closeMasking(){ $('#masking-bg').css('display','none'); $('#masking-layer').css('display','none'); } </script> </body> </html>
注意：上述代码中的图片自己替换。$('#masking-layer').height($(window).height());的作用是考虑底层的页面有滑动条条。因为设备的长宽比完全不一样，在PC端看会有点问题。
效果图：
