欢迎来到宝物袋网站,如果你有宝物想分享给大家的话,请联系我们。注册 | 登录

当前位置:首页 » js » 正文内容

一个基于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>