How to implement mask layer in HTML How to use mask layer in HTML_HTML/Xhtml_Web page production

Using a mask layer in Web pages can prevent repeated operations and prompt loading; it can also simulate pop-up modal windows.

Implementation idea: One DIV serves as the mask layer, and one DIV displays the loading dynamic GIF image. In the following sample code, it also shows how to call the display and hiding mask layer in the iframe subpage.

Sample code:

index.html

XML/HTML CodeCopy content to clipboard

1. 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. }
9. // Browser Compatibility Get browser viewport height
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. }
18. // Browser compatibility Get browser viewport width
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. }
27. /**
28. * Show mask layer
29. */
30. function showOverlay() {
31. //The width and height of the mask layer are the width and height of the page content respectively
32. $('.overlay').css({'height':$(document). height(),'width':$(document).width()});
33. $('.overlay').show();
34. }
36. /**
37. * Show Loading prompt
38. */
39. function showLoading() {
40. //Display the mask layer first
41. showOverlay();
42. // Loading prompt window is centered
43. $("#loadingTip").css('top',
44. (getWindowInnerHeight() - $("#loadingTip").height()) / 2 'px');
45. $("#loadingTip").css('left',
46. (getWindowInnerWidth() - $("#loadingTip").width()) / 2 'px');
47.                                                   
$(
48. "#loadingTip").show();
$(document).scroll(
49. function() {
50. return false;
});
}
54. /**
55. * Hide Loading prompt
56. */
57. function hideLoading() {
$(
58. '.overlay').hide();
$(
59. "#loadingTip").hide();
$(document).scroll(
60. function() {
61. return true;
});
}
64. /**
65. * Simulate pop-up modal window DIV
66. * @param innerHtml modal window HTML content
67. */
68. function showModal(innerHtml) {
69. // Get the DIV used to display the simulation modal window
70. var dialog = $('#modalDiv');
71.  
72. // Setting content
73. dialog.html(innerHtml);
74.  
75. // Modal window DIV window is centered
76. dialog.css({
77.  'top' : (getWindowInnerHeight() - dialog.height()) / 2 'px' ,
78.  'left' : (getWindowInnerWidth() - dialog.width()) / 2 'px'
79. });
80.  
81. // Window DIV rounded corners
82. Dialog.find('.modal-container').css('border-radius', '6px');
83.  
84. // Modal window close button event
85. dialog.find('.btn-close').click(function(){
86. closeModal();
87. });
88.  
89. //Display mask layer
90. showOverlay();
91.  
92. //Display mask layer
93. dialog.show();
94. }
96. /**
97. * Simulate closing modal window DIV
98. */
99. function closeModal() {
100. $('.overlay').hide();
101. $('#modalDiv').hide();
102. $('#modalDiv').html('');
103. }

body.html

XML/HTML CodeCopy content to clipboard

1. 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. }
48. style>
49. script type="text/ javascript">
50.  
51. function showOverlay() {
52. // Call the parent window to display the mask layer and Loading prompts
53. window.top.window.showLoading();
55. // Use a timer to simulate closing the Loading prompt
56. setTimeout(function() {
57. window.top.window.hideLoading();
58. }, 3000);
60. }
62. function showModal() {
63. // Call the parent window method to simulate a pop-up modal window
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();'>Click to pop up the mask layerbutton>
73.  button id='btnShowModal' class='button' onclick='showModal();'>Click to pop up the modal windowbutton>
74. div>
75.  div> 
76.  
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