1.HTML代碼：
<div id="mask" class="mask"></div>
<a href="javascript:;" onclick="showMask()" >點我顯示遮罩層</a><br />
<a href="javascript:;" onclick="letDivCenter('#model')">點我讓DIV始終顯示在屏幕中間</a><br />
<a href="javascript:;" onclick="showAll('#model')">點我顯示所有</a><br />
<div>
<div id="model" class="model">
這是內容
</div>
</div>
2.CSS代碼
<style type="text/css">
.mask {
position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
}
.model{
position: absolute; z-index: 1003;
width:320px; height:320px; text-align:center;
background-color:#0066FF; display: none;
}
</style>
3.js代碼
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//兼容火狐、IE8
function showMask(){
$("#mask").css("height",$(document).height());
$("#mask").css("width",$(document).width());
$("#mask").show();
}
//讓指定的DIV始終顯示在屏幕正中間
function letDivCenter(divName){
var top = ($(window).height() - $(divName).height())/2;
var left = ($(window).width() - $(divName).width())/2;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
}
function showAll(divName){
showMask();
letDivCenter(divName);
}
</script>
以上可參考原著 http://blog.csdn.net/z69183787/article/details/8108641
添加遮罩時禁止滾屏 可參考http://www.cnblogs.com/licf/p/4691556.html
寫頁面經常會遇到彈出層，為了突顯彈出層，一般會設一個遮罩
<div class="mask"></div>
遮罩層的樣式為：
.mask{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
z-index: 998;
display: none;
}
可是這時會有一個問題，就是即使給遮罩層設為跟屏幕一樣高一樣寬，但一滾輪或手動時底下的頁面如超過一屏仍會滾，如果禁止呢？
有同學說這個不簡單嗎？直接給body設成100%高overflow:hidden就行了
以下代碼：
document.body.style.overflow='hidden';
document.body.style.height='100%';
在chrome里一試，果然行，紋絲不動啊，太神奇了是不是？可是不能光在chrome里測啊，咱還得考慮有人用了火狐啊QQ啊歐朋啊，在火狐里一試，頁面照樣能滾，
真叫人皺眉頭，不得已，繼續搜，看有沒有高見，又有同學說了把滾動條設為無，可是設為無只是不顯示並不代表頁面不滾哪，還有的說可以監聽事件滾動的時候把scroolTop的值改為0，
window.onscroll=
function
(){
document.body.scrollTop = 0
}
試了一下好象也無濟於事哎（或許是手機端的事件跟電腦端不同原因），忽然想既然chrome里行，火狐不行沒准是兼容的問題，於是寫了一條加上：
document.body.style.overflow='hidden';
document.body.style.height='100%';
document.documentElement.style.overflow='hidden'
再試火狐也ok了，原來真是兼容性問題，但我們項目是在微信里用的，還得在微信里測下，
據說微信調用瀏覽器，如果手機上安裝了qq瀏覽器則會調用QQ瀏覽器，如果沒有則調用系統自帶的，在微信里一測，可以禁止滾動，但是在釋放時不行了，
別的瀏覽器釋放后能正常滾動，恢復到未彈出層時狀態，就是頁面超過一屏是可以滾動的，但是微信釋放后也不能滾動了，這
可怎么辦，前功盡棄了？只能再查，終於找到了，在touchmove時禁用瀏覽器默認事件，
document.addEventListener('touchmove', function (event) {
event.preventDefault();
})
我只需要在遮罩彈出時禁用，遮罩關閉時釋放，於是我改了下代碼：
var aBtn=$('#a1'); //點擊按鈕
var guide=$('.guide'); //彈出的遮罩層
var flag=0; //標識，初始為0
aBtn.tap(function() {
guide.css('display', 'block'); //顯示遮罩
flag=1;
});
document.addEventListener('touchmove', function (event) { //監聽滾動事件
if(flag==1){ //判斷是遮罩顯示時執行，禁止滾屏
event.preventDefault(); //最關鍵的一句，禁止瀏覽器默認行為
}
})
guide.tap(function(){
guide.css('display','none'); //隱藏遮罩
flag=0; //重置為0
});
這里我使用了zepto.js庫，再測了下，火狐，chrome，opera,QQ,系統默認的瀏覽器和微信，都能如願執行，費了幾個小時終於搞定啦