代码如下
<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="https://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>
<head>
<meta charset="utf-8">
