代碼如下
<html>
<head>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
}
.lbOverlay{
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
zoom: 1;
background: #2f2e2e;
z-index: 999;
width:100%;
height:100%;
filter:alpha(opacity=50); /*IE濾鏡，透明度50%*/
-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/
}
.hidden_pro_au {
display:none;
background: #fff;
padding: 6px;
text-align: left;
width: 400;
height: 300;
background: #ccc;
overflow: auto;
position: absolute;
top: 0;
left: 0;
z-index: 9999999
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function show(){
$(".lbOverlay").css({"height":window.screen.availHeight});
$(".lbOverlay").show();
var st=$(document).scrollTop(); //頁面滑動高度
var objH=$(".hidden_pro_au").height();//浮動對象的高度
var ch=$(window).height();//屏幕的高度
var objT=Number(st)+(Number(ch)-Number(objH))/2; //思路 浮動高度+（（屏幕高度-對象高度））/2
$(".hidden_pro_au").css("top",objT);
var sl=$(document).scrollLeft(); //頁面滑動左移寬度
var objW=$(".hidden_pro_au").width();//浮動對象的寬度
var cw=$(window).width();//屏幕的寬度
var objL=Number(sl)+(Number(cw)-Number(objW))/2; //思路 左移浮動寬度+（（屏幕寬度-對象寬度））/2
$(".hidden_pro_au").css("left",objL);
$(".hidden_pro_au").slideDown("20000");//這里顯示方式多種效果
}
function closeDiv(){
$(".lbOverlay").hide();
$(".hidden_pro_au").hide();
}
</script>
</head>
<body>
頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容頁面原來內容
<button onclick="show()">點我彈出遮罩層</button>
<div class="lbOverlay" onclick="closeDiv()"></div>
<div class="hidden_pro_au">顯示具體的內容</div>
</body>
</html>
思路就是 先寫html代碼。為了看出效果 先把 遮罩層的none值 改成block。便於觀察調試。先寫全屏遮罩層，這個沒什么說的，需要注意的是。這里用的定位是fixed 配合寬高百分百，這樣始終能夠鋪滿屏。透明度注意兼容。z-index 普通頁面層級要高一些（值要大點），寫完之后，把css屬性 display改成none ；緊接着開始寫遮罩層內部窗口的樣式，也是先display為block。這里用定位absolute,z-index層級要更高點。設置好這個div窗口寬高（具體定位多少由jq完成），完成之后把display 改成none;然后開始寫jq方法show（）；jq思路 寫在代碼了，（//思路 浮動高度+（（屏幕高度-對象高度））/2） 確定了 div顯示窗口的top高度為居中。寬度也一樣。然后修改之后把遮罩層的div 和 顯示窗口的div 屬性dispaly 改成 block 即可;我這給 遮罩層也綁定了個方法。點擊他 關閉遮罩效果 ；也就是修改 倆個div的 display屬性為none