在做移動端的立即購買頁面時，點擊底部固定欄立即購買按鈕需要彈出一個陰影遮罩，在遮罩頂部有一個固定在底部的頁面，所以總共是3層頁面：最底層瀏覽頁->陰影遮罩頁->最上層的立即購買選擇規格數量頁；效果如下圖：
在次過程中遇到的一些問題以及解決方案總結如下：
問題1：陰影遮罩出現後底部的頁面還可以滑動；
解決：在彈出遮罩的js裏click事件中，給body加overflow:hidden的css屬性；$("body").css("overflow","hidden");
問題2：頁面向上滑動，陰影遮罩和陰影遮罩上的立即購買頁面會隨着往上移動；
解決：編寫了如下函數計算頁面移動的距離，讓遮罩和立即購買頁面也移動相應的距離，代碼如下：
function getScrollTop(){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body){
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
寫了一個簡單的demo，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" name="viewport">
<title>陰影遮罩</title>
<script src="js/jquery-1.11.1.min.js"></script>
<style>
body{
padding:0px;
margin:0px;
}
#back1{
z-index: 99999;
display: block;
background: rgba(0, 0, 0, 0.498039);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.one{
height:100px;
width:100%;
text-align: center;
background-color:#fff;
position:absolute;
bottom:0px;
display:none;
position: absolute;
bottom: 0;
z-index: 9999999;
}
.one span{
font-size:24px;
display: inline-block;
height:30px;
width:30px;
position: absolute;
right: 18px;
top: 0px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="back1" style="display: none; top: 0px;"></div>
<div class="one"><p>這是遮罩上面的一層</p> <span class="xx">x</span></div>
<div>陰影遮罩下面的頁面</div>
<br /><br /><br /><br /><br /><br />
<div style="height:500px;width:200px;border:1px solid red;"></div>
<div>陰影遮罩下面的頁面</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="bottom" style="position:fixed;bottom:0px;height:50px;width:100%;background-color:#ccc;line-height: 50px; text-align: center;">點我出現遮罩</div>
<script type="text/javascript">
//獲取頁面上移的距離
function getScrollTop(){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body){
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
$(".bottom").on("click",function(){
$("#back1").css("top",getScrollTop()+'px');
$("#back1").show();
$(".one").css("bottom",-getScrollTop()+'px');
$(".one").show();
$("body").css("overflow","hidden");
});
$(".xx").on("click",function(){
$("#back1").hide();
$(".one").hide();
$("body").css("overflow","auto");
});
</script>
</body>
</html>
至此，一個好用的彈出demo就完美收官啦！！