jQuery 遮罩层效果（转）

最精简，最强大的 jQuery 遮罩层效果。
1. 当浏览器改变大小时，遮罩层的大小会相应地改变。

2. 遮罩层上方的对话框可随 scroll 的改变而改变，即对话框居中显示。

HTML Code：

 

[html]   view plain copy

1. <div id="main"> <a href="#" onclick="showBg();">点击这里看 jQuery 遮罩层效果.</a> </div>  
2. <!-- jQuery 遮罩层 -->  
3. <div id="fullbg"></div>  
4. <!-- end jQuery 遮罩层 -->   
5. <!-- 对话框 -->  
6. <div id="dialog">  
7.   <p class="close"><a href="#" onclick="closeBg();">关闭</a></p>  
8.   <p>正在加载，请稍后...</p>  
9. </div>  
10. <!-- jQuery 遮罩层上方的对话框 -->  

CSS Code：

 

 

[javascript]   view plain copy

1. <style type="text/css">  
2. body {  
3.     font-family:Arial, Helvetica, sans-serif;  
4.     font-size:12px;  
5.     margin:0;  
6. }  
7. #main {  
8.     height:1800px;  
9.     padding-top:90px;  
10.     text-align:center;  
11. }  
12. #fullbg {  
13.     background-color:Gray;  
14.     left:0px;  
15.     opacity:0.5;  
16.     position:absolute;  
17.     top:0px;  
18.     z-index:3;  
19.     filter:alpha(opacity=50); /* IE6 */  
20.     -moz-opacity:0.5; /* Mozilla */  
21.     -khtml-opacity:0.5; /* Safari */  
22. }  
23. #dialog {  
24.     background-color:#FFF;  
25.     border:1px solid #888;  
26.     display:none;  
27.     height:200px;  
28.     left:50%;  
29.     margin:-100px 0 0 -100px;  
30.     padding:12px;  
31.     position:fixed !important; /* 浮动对话框 */  
32.     position:absolute;  
33.     top:50%;  
34.     width:200px;  
35.     z-index:5;  
36. }  
37. #dialog p {  
38.     margin:0 0 12px;  
39. }  
40. #dialog p.close {  
41.     text-align:right;  
42. }  
43. </style>  

jQuery Code：

 

 

[javascript]   view plain copy

1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  
2. <script type="text/javascript">  
3. //显示灰色 jQuery 遮罩层  
4. function showBg() {  
5.     var bh = $("body").height();  
6.     var bw = $("body").width();  
7.     $("#fullbg").css({  
8.         height:bh,  
9.         width:bw,  
10.         display:"block"  
11.     });  
12.     $("#dialog").show();  
13. }  
14. //关闭灰色 jQuery 遮罩  
15. function closeBg() {  
16.     $("#fullbg,#dialog").hide();  
17. }  
18. </script>  
19. <!--[if lte IE 6]>  
20. <script type="text/javascript">  
21. // 浮动对话框  
22. $(document).ready(function() {  
23.     var domThis = $('#dialog')[0];  
24.     var wh = $(window).height() / 2;  
25.     $("body").css({  
26.         "background-image": "url(about:blank)",  
27.         "background-attachment": "fixed"  
28.     });  
29.     domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"');  
30. });  
31. </script>  
32. <![endif]-->  

注意：请将遮罩层的 DIV 放置于 HTML 文档最后 </body> 标签之前，否则遮罩层将无法获取当前浏览器窗口的高度。