做手機端網頁的時候，設計師做了這樣一張圖：
這個頁面除了底層的布局，主要的工作是蒙版的實現，這種特效很常見到，淘寶改版的時候會彈出也是這種效果，引導剁手黨熟悉新布局和功能，以便讓他們更好的敗家。還有好多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端看會有點問題。
效果圖：
