简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  在HTML中实现和使用遮罩层_html/css_WEB-ITnose

在HTML中实现和使用遮罩层_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:22:521119browse

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" / alt="在HTML中实现和使用遮罩层_html/css_WEB-ITnose" >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     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 <!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>

运行结果

初始化

显示遮罩层和Loading提示

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

END

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTTP初步注解_html/css_WEB-ITnoseNext article：这段HTML怎么阴隐藏？_html/css_WEB-ITnose

Related articles

See more