HTML实现遮罩层的方法 HTML中如何使用遮罩层_HTML/Xhtml_网页制作

Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。

实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。

示例代码：

index.html

XML/HTML Code复制内容到剪贴板

1. nbsp;html>  
2. html lang="zh-CN">  
3. head>  
4. meta charset="utf-8">  
5. meta http-equiv="X-UA-Commpatible" content="IE=edge">  
6. title>HTML遮罩层title>  
7. link rel="stylesheet" href="css/index.css">  
8. head>  
9. body>  
10.     div class="header" id="header">  
11.         div class="title-outer">  
12.             span class="title">  
13.                 HTML遮罩层使用   
14.             span>  
15.         div>  
16.     div>  
17.     div class="body" id="body">  
18.         iframe id="iframeRight" name="iframeRight" width="100%" height="100%"  
19.             scrolling="no" frameborder="0"  
20.             style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow: hidden;"  
21.             onload="rightIFrameLoad(this)" src="body.html">iframe>  
22.     div>  
23.        
24.       
25.     div id="overlay" class="overlay">div>  
26.       
27.     div id="loadingTip" class="loading-tip">  
28.         img src="images/loading.gif" />  
29.     div>  
30.        
31.       
32.     div class="modal" id="modalDiv">div>  
33.        
34.     script type='text/javascript' src="js/jquery-1.10.2.js">script>  
35.     script type="text/javascript" src="js/index.js">script>  
36. body>  
37. html>  

index.css

CSS Code复制内容到剪贴板

1. * {   
2.     margin: 0;   
3.     padding: 0;   
4. }   
5.   
6. html, body {   
7.     width: 100%;   
8.     height: 100%;   
9.     font-size: 14px;   
10. }   
11.   
12. div.header {   
13.     width: 100%;   
14.     height: 100px;   
15.     border-bottom: 1px dashed blue;   
16. }   
17.   
18. div.title-outer {   
19.     position: relative;   
20.     top: 50%;   
21.     height: 30px;   
22. }   
23. span.title {   
24.     text-align: left;   
25.     position: relative;   
26.     left: 3%;   
27.     top: -50%;   
28.     font-size: 22px;   
29. }   
30.   
31. div.body {   
32.     width: 100%;   
33. }   
34. .overlay {   
35.     position: absolute;   
36.     top: 0px;   
37.     left: 0px;   
38.     z-index: 10001;   
39.     display:none;   
40.     filter:alpha(opacity=60);   
41.     background-color: #777;   
42.     opacity: 0.5;   
43.     -moz-opacity: 0.5;   
44. }   
45. .loading-tip {   
46.     z-index: 10002;   
47.     position: fixed;   
48.     display:none;   
49. }   
50. .loading-tip img {   
51.     width:100px;   
52.     height:100px;   
53. }   
54.   
55. .modal {   
56.     position:absolute;   
57.     width: 600px;   
58.     height: 360px;   
59.     border: 1px solid rgba(0, 0, 0, 0.2);   
60.     box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);   
61.     display: none;   
62.     z-index: 10003;   
63.     border-radius: 6px;   
64. }   
65.   

index.js

JavaScript Code复制内容到剪贴板

1. function rightIFrameLoad(iframe) {   
2.     var pHeight = getWindowInnerHeight() - $('#header').height() - 5;   
3.        
4.     $('div.body').height(pHeight);   
5.     console.log(pHeight);   
6.        
7. }   
8.   
9. // 浏览器兼容 取得浏览器可视区高度   
10. function getWindowInnerHeight() {   
11.     var winHeight = window.innerHeight   
12.             || (document.documentElement && document.documentElement.clientHeight)   
13.             || (document.body && document.body.clientHeight);   
14.     return winHeight;   
15.        
16. }   
17.   
18. // 浏览器兼容 取得浏览器可视区宽度   
19. function getWindowInnerWidth() {   
20.     var winWidth = window.innerWidth   
21.             || (document.documentElement && document.documentElement.clientWidth)   
22.             || (document.body && document.body.clientWidth);   
23.     return winWidth;   
24.        
25. }   
26.   
27. /**  
28.  * 显示遮罩层  
29.  */  
30. function showOverlay() {   
31.     // 遮罩层宽高分别为页面内容的宽高   
32.     $('.overlay').css({'height':$(document).height(),'width':$(document).width()});   
33.     $('.overlay').show();   
34. }   
35.   
36. /**  
37.  * 显示Loading提示  
38.  */  
39. function showLoading() {   
40.     // 先显示遮罩层   
41.     showOverlay();   
42.     // Loading提示窗口居中   
43.     $("#loadingTip").css('top',   
44.             (getWindowInnerHeight() - $("#loadingTip").height()) / 2 + 'px');   
45.     $("#loadingTip").css('left',   
46.             (getWindowInnerWidth() - $("#loadingTip").width()) / 2 + 'px');   
47.                
48.     $("#loadingTip").show();   
49.     $(document).scroll(function() {   
50.         return false;   
51.     });   
52. }   
53.   
54. /**  
55.  * 隐藏Loading提示  
56.  */  
57. function hideLoading() {   
58.     $('.overlay').hide();   
59.     $("#loadingTip").hide();   
60.     $(document).scroll(function() {   
61.         return true;   
62.     });   
63. }   
64.   
65. /**  
66.  * 模拟弹出模态窗口DIV  
67.  * @param innerHtml 模态窗口HTML内容  
68.  */  
69. function showModal(innerHtml) {   
70.     // 取得显示模拟模态窗口用DIV   
71.     var dialog = $('#modalDiv');   
72.        
73.     // 设置内容   
74.     dialog.html(innerHtml);   
75.        
76.     // 模态窗口DIV窗口居中   
77.     dialog.css({   
78.         'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px',   
79.         'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'  
80.     });   
81.        
82.     // 窗口DIV圆角   
83.     dialog.find('.modal-container').css('border-radius','6px');   
84.        
85.     // 模态窗口关闭按钮事件   
86.     dialog.find('.btn-close').click(function(){   
87.         closeModal();   
88.     });   
89.        
90.     // 显示遮罩层   
91.     showOverlay();   
92.        
93.     // 显示遮罩层   
94.     dialog.show();   
95. }   
96.   
97. /**  
98.  * 模拟关闭模态窗口DIV  
99.  */  
100. function closeModal() {   
101.     $('.overlay').hide();   
102.     $('#modalDiv').hide();   
103.     $('#modalDiv').html('');   
104. }   

body.html

XML/HTML Code复制内容到剪贴板

1. nbsp;html>  
2. html lang="zh-CN">  
3. head>  
4. meta charset="utf-8">  
5. meta http-equiv="X-UA-Commpatible" content="IE=edge">  
6. title>body 页面title>  
7. style type="text/css">  
8. * {   
9.     margin: 0;   
10.     padding: 0;   
11. }   
12.   
13. html, body {   
14.     width: 100%;   
15.     height: 100%;   
16. }   
17.   
18. .outer {   
19.     width: 200px;   
20.     height: 120px;   
21.     position: relative;   
22.     top: 50%;   
23.     left: 50%;   
24. }   
25.   
26. .inner {   
27.     width: 200px;   
28.     height: 120px;   
29.     position: relative;   
30.     top: -50%;   
31.     left: -50%;   
32. }   
33.   
34. .button {   
35.     width: 200px;   
36.     height: 40px;   
37.     position: relative;   
38. }   
39.     
40. .button#btnShowLoading {   
41.     top: 0;   
42. }   
43.   
44. .button#btnShowModal {   
45.     top: 30%;   
46. }   
47.   
48. style>  
49. script type="text/javascript">  
50.        
51.     function showOverlay() {   
52.         // 调用父窗口显示遮罩层和Loading提示   
53.         window.top.window.showLoading();   
54.   
55.         // 使用定时器模拟关闭Loading提示   
56.         setTimeout(function() {   
57.             window.top.window.hideLoading();   
58.         }, 3000);   
59.   
60.     }   
61.   
62.     function showModal() {   
63.         // 调用父窗口方法模拟弹出模态窗口   
64.         window.top.showModal($('#modalContent').html());   
65.     }   
66.        
67. script>  
68. head>  
69. body>  
70.     div class='outer'>  
71.         div class='inner'>  
72.             button id='btnShowLoading' class='button' onclick='showOverlay();'>点击弹出遮罩层button>  
73.             button id='btnShowModal' class='button' onclick='showModal();'>点击弹出模态窗口button>  
74.         div>  
75.     div>  
76.        
77.       
78.     div id='modalContent' style='display: none;'>  
79.         div class='modal-container' style='width: 100%;height: 100%;background-color: white;'>  
80.             div style='width: 100%;height: 49px;position: relative;left: 50%;top: 50%;'>  
81.                 span style='font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;'>模态窗口1span>  
82.             div>  
83.             button class='btn-close' style='width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px;'>关闭button>  
84.         div>  
85.     div>  
86.     script type='text/javascript' src="js/jquery-1.10.2.js">script>  
87. body>  
88. html>  
89.   

运行结果：

初始化

显示遮罩层和Loading提示

显示遮罩层和模拟弹出模态窗口

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/haoqipeng/p/html-overlay.html