一个基于jquery框架实现的js兼容主流浏览器遮罩/遮挡弹出层居中实例源码
说一下它的效果：点击一个链接或者按钮，然后弹出两个层，一个为遮挡层，一个为显示顶层，下面直接上图片展示给大家看：
下面直接将源码分享出来给大家，源码里有引入jquery.js文件，如果完整复制下面的代码却无法实现上图效果的话，应该是jquery.js文件失效了，大家只要重新引入正确有效的jquery.js就可以了；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>欢迎来到宝物袋(<a href="http://www.baowudai.cn/">http://www.baowudai.cn/</a>)网站</title>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<style type="text/css">
*{margin:0px; padding:0px;}
ul{list-style-type:none;}
#blackBox{display:none;background:#000; opacity:0.4;filter:alpha(opacity=40);}
.nav{display:none;position:fixed; width:260px; top:67px; background:#25aad6; z-index:9999; border:1px solid #E1F3FE;border-radius: 3px; padding:10px;}
.nav li{color: #fff;height: 42px;line-height: 42px;}
.nav li a{text-decoration:none; color:#FFF;}
</style>
</head>
<body>
<p>欢迎来到宝物袋(<a href="http://www.baowudai.cn/">http://www.baowudai.cn/</a>)网站，我们这里宝物多多！<a class="linka" href="javascript:void(0);">点击弹出遮挡层效果</a></p>
<div class="nav">
<ul>
<li><a href="#">软件</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">源码</a></li>
<li><a href="#">模板</a></li>
</ul>
</div>
<div id="blackBox"></div>
<script type="text/javascript">
$(function (){
$(".linka").click(function (){
if($(".nav").is(':hidden')){
$("#blackBox").show();
$("#blackBox").css({"position":"fixed","top":"0px","left":"0px","z-index":"99","width":$(window).width()+"px","height":$(window).height()+"px"});
$(".nav").css({"position":"fixed","z-index":"9999","left":($(window).width()-$(".nav").width())/2+"px","top":($(window).height()-$(".nav").height())/2+"px"});
$(".nav").show();
}else{
$(".nav").hide();
$("#blackBox").hide();
}
});
$("#blackBox").click(function (){
$(".nav").hide();
$(this).hide();
});
});
</script>
</body>
</html>