search

Home >Web Front-end >HTML Tutorial >How to implement mask layer in HTML How to use mask layer in HTML_HTML/Xhtml_Web page production

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

WBOY
WBOYOriginal
2016-05-16 16:45:591758browse

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. >  
  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. $(
  48. "#loadingTip").show();
    49. $(document).scroll(
  49. function() {
  50. return false;
    51. });
    52. }
  54. /**
  55. * Hide Loading prompt
  56. */
  57. function hideLoading() {
    58. $(
  58. '.overlay').hide();
    59. $(
  59. "#loadingTip").hide();
    60. $(document).scroll(
  60. function() {
  61. return true;
    62. });
    63. }
  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. >  
  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

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：W3C recommended mobile Web markup language XHTML Basic 1.1_HTML/Xhtml_Web page productionNext article：W3C recommended mobile Web markup language XHTML Basic 1.1_HTML/Xhtml_Web page production

Related articles

See more