简单 Jquery弹出遮罩 

 1 //CSS
 2 <style type="text/css">
 3         .mask
 4         {
 5             display: none;
 6             position: absolute;
 7             top: 0;
 8             left: 0;
 9             width: 100%;
10             height: 100%;
11             background: #000;
12             z-index: 100;
13             -moz-opacity: 0.5;
14             opacity: .50;
15             filter: alpha(opacity=50);
16             height: 1000px;
17         }
18         .tanchu
19         {
20             width: 600px;
21             height: 300px;
22             position: absolute;
23             top: 50%;
24             left: 50%;
25             margin: -150px 0 0 -300px;
26             z-index: 101;               //弹出Z高度要高于mask层
27             background: white;
28             display: none;
29         }
30         .close
31         {
32             color: #fff;
33             cursor: pointer;
34             position: absolute;
35             top: 5px;
36             right: 5px;
37             margin-bottom: 5px;
38             color: Gray;
39         }
40     </style>
 1 <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
 2     <script type="text/javascript">
 3         $(function () {
 4             $(".input").click(function () {
 5                 $(".tanchu").show()
 6                 $(".mask").css({ display: "block", height: $(document).height() }); //获取高度，兼容IE6。如果不考虑IE6直接可以换成show()    
 7             });
 8             $(".close").click(function () {
 9                 $(".tanchu").hide();
10                 $(".mask").hide();
11                 return false;
12             });
13             $(window).resize(function () {
14                 $(".mask").css({ height: "100%", width: "100%" });               //窗口大小调整的时候，遮罩层要相应的调整
15             }); 
16         });  
17     </script>
 1 <body>
 2     <div class="mask">
 3     </div>
 4     <p>
 5         <input class="input" type="button" style="width: 100px; height: 30px;" value='弹 出' /></p>
 6     <div class="tanchu">
 7         <a class="close">关闭</a>
 8         <p>
 9             我是一个弹出层我是一个弹出层我是一个七减五的弹出层 我是一个弹出层 我是一个弹出层</p>
10     </div>
11 </body

 

posted @ 2013-06-01 10:05  mushishi  阅读(207)  评论(0)  编辑  收藏  举报