HTML实现遮罩层的方法 HTML中如何使用遮罩层
这篇文章主要为大家详细介绍了HTML实现遮罩层的方法，Web页面中使用遮罩层，可防止重复操作，那么如何在HTML中使用遮罩层？感兴趣的小伙伴们可以参考一下。
文章转自脚本之家，作者MySomeDay ，文章地址 http://www.jb51.net/web/444162.html
Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。
实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。
示例代码：
index.html
1 <!DOCTYPE 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 <!-- 遮罩层DIV --> 25 <div id="overlay" class="overlay"></div> 26 <!-- Loading提示 DIV --> 27 <div id="loadingTip" class="loading-tip"> 28 <img src="images/loading.gif" /> 29 </div> 30 31 <!-- 模拟模态窗口DIV --> 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
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 font-size: 12px !important; line-height: 1.5 !important;">#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
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
1 <!DOCTYPE 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 <!-- 模态窗口内容DIV，将本页面DIV内容设置到父窗口DIV上并模态显示 -->
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%;\'>模态窗口1</span>
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提示
显示遮罩层和模拟弹出模态窗口
