说一下它的效果:点击一个链接或者按钮,然后弹出两个层,一个为遮挡层,一个为显示顶层,下面直接上图片展示给大家看:
下面直接将源码分享出来给大家,源码里有引入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>