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

New usage of watch and watchEffect in Vue 3

Table of contents 1. New usage of watch 1.1. Watc...

React Native JSI implements sample code for RN and native communication

Table of contents What is JSI What is different a...

Use CSS and Bootstrap icons to create an up and down jumping indicator arrow animation effect

Sometimes the page is very long and needs an arro...

How to set up Referer in Nginx to prevent image theft

If the server's images are hotlinked by other...

MySQL and MySQL Workbench Installation Tutorial under Ubuntu

Ubuntu install jdk: [link] Install Eclipse on Ubu...

How to implement Docker Registry to build a private image warehouse

The image of the microservice will be uploaded to...

Tutorial for installing MySQL 8.0.18 under Windows (Community Edition)

This article briefly introduces how to install My...

Full analysis of web page elements

Relative Length Units em Description: Relative len...

Detailed explanation of Vue3 encapsulation Message message prompt instance function

Table of contents Vue3 encapsulation message prom...

MYSQL database basics - Join operation principle

Join uses the Nested-Loop Join algorithm. There a...

When to use table and when to use CSS (experience sharing)

The main text page of TW used to have a width of 8...

Optimization of data tables in MySQL database, analysis of foreign keys and usage of three paradigms

This article uses examples to illustrate the opti...

Summary of MySQL's commonly used SQL statements for creating tables, adding fields, modifying fields, and adding indexes

This article uses examples to describe the common...

9 ways to show and hide CSS elements

In web page production, displaying and hiding ele...

How to detect if the current browser is a headless browser with JavaScript

Table of contents What is a headless browser? Why...