Community Learn Tools Library Leisure
search
English
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
Release： 2016-05-16 16:45:59
Original
1729 people have browsed it

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

Related labels：
HTML实现遮罩层 HTML使用遮罩层
source：php.cn
Previous article：W3C recommended mobile Web markup language XHTML Basic 1.1_HTML/Xhtml_Web page production Next article：In-depth understanding of html form input monitoring_HTML/Xhtml_web page production
Statement of this Website
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
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2245
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2385
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1994
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1881
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1950
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template