web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。
实现思路：一个div作为遮罩层，一个div显示loading动态gif图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。
示例代码：
index.html
1 2 3 4 5 6 html遮罩层 7 8 9 10 11 12 13 html遮罩层使用14 15
16
17 18 22
23 24 25
26 27 28 29
30 31 32
33 34 35 36 37
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 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 }
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 2 3 4 5 6 body 页面 7 49 68 69 70 71 72 点击弹出遮罩层73 点击弹出模态窗口74
75
76 77 78 79 80 81 模态窗口182
83 关闭84
85
86 87 88
运行结果
初始化
显示遮罩层和loading提示
显示遮罩层和模拟弹出模态窗口
end