How to implement mask layer in HTML How to use mask layer in HTML

How to implement mask layer in HTML How to use mask layer in HTML

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

Implementation idea: one DIV is used as a mask layer, and one DIV displays a loading dynamic GIF image. The following sample code also shows how to call display and hide the mask layer in the iframe subpage.

Sample code:

index.html

XML/HTML CodeCopy content to clipboard
  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 mask layer </ 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 mask layer usage
  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.      <!-- Mask layer DIV -->   
  25.      < div   id = "overlay"   class = "overlay" > </ div >   
  26.      <!-- Loading prompt DIV -->   
  27.      < div   id = "loadingTip"   class = "loading-tip" >   
  28.          < img   src = "images/loading.gif"   />   
  29.      </ div >   
  30.        
  31.      <!-- Simulate modal window 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

CSS CodeCopy content to clipboard
  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 CodeCopy content to clipboard
  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. // Browser compatibility Get the browser's visible area 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. }
  17.   
  18. // Browser compatibility Get the width of the browser's visible area   
  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. * Display mask layer
  29. */   
  30. function showOverlay() {
  31.      // The width and height of the mask layer are the width and height of the page content   
  32. $( '.overlay' ).css({ 'height' :$(document).height(), 'width' :$(document).width()});
  33. $( '.overlay' ).show();
  34. }
  35.   
  36. /**
  37. * Display 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();
  49. $(document).scroll( function () {
  50.          return   false ;
  51. });
  52. }
  53.   
  54. /**
  55. * Hide Loading prompt
  56. */   
  57. function hideLoading() {
  58. $( '.overlay' ).hide();
  59. $( "#loadingTip" ).hide();
  60. $(document).scroll( function () {
  61.          return   true ;
  62. });
  63. }
  64.   
  65. /**
  66. * Simulate pop-up modal window DIV
  67. * @param innerHtml modal window HTML content
  68. */   
  69. function showModal(innerHtml) {
  70.      // Get the DIV used to display the simulated modal window   
  71.      var dialog = $( '#modalDiv' );
  72.        
  73.      //Set the content   
  74. dialog.html(innerHtml);
  75.        
  76.      //Center the modal window DIV window   
  77. dialog.css({
  78.          'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px' ,
  79.          'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'   
  80. });
  81.        
  82.      // Window DIV rounded corners   
  83. dialog.find( '.modal-container' ).css( 'border-radius' , '6px' );
  84.        
  85.      // Modal window close button event   
  86. dialog.find( '.btn-close' ).click( function (){
  87. closeModal();
  88. });
  89.        
  90.      // Display the mask layer   
  91. showOverlay();
  92.        
  93.      // Display the mask layer   
  94. dialog.show();
  95. }
  96.   
  97. /**
  98. * Simulate closing the modal window DIV
  99. */   
  100. function closeModal() {
  101. $( '.overlay' ).hide();
  102. $( '#modalDiv' ).hide();
  103. $( '#modalDiv' ).html( '' );
  104. }

body.html

XML/HTML CodeCopy content to clipboard
  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 page </ 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. // Call the parent window to display the mask layer and Loading prompt
  53. window.top.window.showLoading();
  54.   
  55. // Use the timer to simulate closing the Loading prompt
  56. setTimeout(function() {
  57. window.top.window.hideLoading();
  58. }, 3000);
  59.   
  60. }
  61.   
  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 overlay layer </ button >   
  73.              < button   id = 'btnShowModal'   class = 'button'   onclick = 'showModal();' > Click to display the modal window </ button >   
  74.          </ div >   
  75.      </ div >   
  76.        
  77.      <!-- Modal window content DIV, set the DIV content of this page to the parent window DIV and display it modally -->   
  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%;' > Modal window 1 </ span >   
  82.              </ div >   
  83.              < button   class = 'btn-close'   style = 'width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px ; ' > Close </button>   
  84.          </ div >   
  85.      </ div >   
  86.      < script   type = 'text/javascript'   src = "js/jquery-1.10.2.js" > </ script >   
  87. </ body >   
  88. </ html >   
  89.   

Running results:

initialization

Display mask layer and loading prompt

Display the mask layer and simulate a pop-up modal window

The above is the full content of this article. I hope it will be helpful for everyone’s study.

Original text: http://www.cnblogs.com/haoqipeng/p/html-overlay.html

<<:  Detailed explanation of the infinite restart problem when running the SpringBoot project docker environment

>>:  Summary of important mysql log files

Recommend

Solution to span width not being determined in Firefox or IE

Copy code The code is as follows: <html xmlns=...

Detailed explanation of four solutions for MySQL active-active synchronous replication

Table of contents Master-Master Synchronization S...

Detailed explanation of the solution to Tomcat's crash when double-clicking startup.bat

As a programmer who has just learned Tomcat, this...

Detailed tutorial on installation and configuration of nginx under Centos7

Note: The basic directory path for software insta...

Deploy Varnish cache proxy server based on Centos7

1. Varnish Overview 1. Introduction to Varnish Va...

Teach you to connect to MySQL database using eclipse

Preface Since errors always occur, record the pro...

Docker5 full-featured harbor warehouse construction process

Harbor is an enterprise-level registry server for...

Explanation of the usage of replace and replace into in MySQL

MySQL replace and replace into are both frequentl...

Detailed explanation of MySQL binlog usage

binlog is a binary log file that records all DML ...

How to use mysqldump to backup MySQL data

1. Introduction to mysqldump mysqldump is a logic...

Detailed explanation of the most reasonable way to partition the hard disk when installing Ubuntu Linux system

No matter you are installing Windows or Linux ope...

MySQL 8.0.15 installation and configuration method graphic tutorial (Windows 10 X64)

What I have been learning recently involves knowl...

The advantages and disadvantages of nginx and lvs and their suitable usage environment

At the very beginning, let's talk about what ...

Implementation of inserting millions of records into MySQL database within 10 seconds

First, let’s think about a question: To insert su...

About input file control and beautification

When uploading on some websites, after clicking t...