在jQuery环境下制作轻巧遮罩层

浏览数：36 / 时间：2015年06月09日

遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作。

制作原理很简单：1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景（重点是捕获内容div的大小位置）4设置点击触发按钮遮罩层背景内容同时显示或隐藏。

具体代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <script type="text/javascript" src="scripts/jquery.js"></script>
 6     <title>demo</title>
 7     <style type="text/css">
 8         body{
 9             font: 12px Verdana, Arial, Helvetica, sans-serif;
10         }
11         .mask {
12             position: absolute;
13             top: 0px;
14             filter: alpha(opacity=60);
15             background-color: #B2B2B2;
16             z-index: 999;
17             left: 0px;
18             opacity:0.5;
19             -moz-opacity:0.5;
20         }
21         .content{
22             display:none;
23             padding:25px 20px;
24             width:600px;
25             border:1px solid #b2b2b2;
26             background:#fff;
27             z-index:1000;
28             position:fixed;
29             left:25%;
30             top:20%;
31         }
32         .content h3,.content p{
33             padding:10px;
34             background:#888;
35             color:#fff;
36         }
37         #close{
38             cursor:pointer;
39             font-size:20px;
40             color:#888;
41             position:absolute;
42             top:5px;
43             right:20px;
44         }
45         #open1{
46             width:90px;
47             color:#000;
48             cursor:pointer;
49             padding:10px;
50             background:#888;
51             color:#fff;
52         }
53     </style>
54     <script type="text/javascript">
55         $(function(){
56             $("#open1").click(function(){
57                 $("#mask").css({
58                     "height":$(document).height(),
59                     "width":$(document).width()
60                 }).show();
61             })
62             $("#open1").click(function(){
63                 $(".content").show();
64             })
65             $("#close").click(function(){
66                 $(".content").hide();
67                 $("#mask").hide();
68             })
69         })
70     </script>
71 </head>
72 <body>
73 <div id="mask" class="mask"></div>
74 <div id="open1">点击显示遮罩层</div>
75 
76 <ul>
77     <li>网页内容</li>
78     <li>网页内容</li>
79     <li>网页内容</li>
80     <li>网页内容</li>
81     <li>网页内容</li>
82     <li>网页内容</li>
83     <li>网页内容</li>
84     <li>网页内容</li>
85     <li>网页内容</li>
86     <li>网页内容</li>
87     <li>网页内容</li>
88 
89 </ul>
90 <div class="content">
91     <h3>遮罩层内容</h3>
92     <p>遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作。
93         <br>
94         制作原理很简单：1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景（重点是捕获内容div的大小位置）4设置点击触发按钮遮罩层背景内容同时显示或隐藏。
95     </p>
96     <span id="close">x</span>
97 </div>
98 </body>
99 </html>