首页 > 网页制作  > HTML/Xhtml

网页制作 HTML实现遮罩层的方法 HTML中如何使用遮罩层

admin HTML/Xhtml 2021-10-02 22:34:14 HTML实现遮罩层 HTML使用遮罩层 
后台-系统设置-扩展变量-手机广告位-内容正文底部

Web页面中使用遮罩层,可防止重复操作,提示loading;也可以模拟弹出模态窗口。

实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片。在下面的示例代码中,同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。

示例代码:

index.html

XML/HTML Code复制内容到剪贴板
  1. >
  2. <htmllang="zh-CN">
  3. <head>
  4. <metacharset="utf-8">
  5. <metahttp-equiv="X-UA-Commpatible"content="IE=edge">
  6. <title>HTML遮罩层title>
  7. <linkrel="stylesheet"href="css/index.css">
  8. head>
  9. <body>
  10. <divclass="header"id="header">
  11. <divclass="title-outer">
  12. <spanclass="title">
  13. HTML遮罩层使用
  14. span>
  15. div>
  16. div>
  17. <divclass="body"id="body">
  18. <iframeid="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. <divid="overlay"class="overlay">div>
  24. <divid="loadingTip"class="loading-tip">
  25. <imgsrc="images/loading.gif"/>
  26. div>
  27. <divclass="modal"id="modalDiv">div>
  28. <scripttype='text/javascript'src="js/jquery-1.10.2.js">script>
  29. <scripttype="text/javascript"src="js/index.js">script>
  30. body>
  31. html>

index.css

CSS Code复制内容到剪贴板
  1. *{
  2. margin:0;
  3. padding:0;
  4. }
  5. html,body{
  6. width:100%;
  7. height:100%;
  8. font-size:14px;
  9. }
  10. div.header{
  11. width:100%;
  12. height:100px;
  13. border-bottom:1pxdashedblue;
  14. }
  15. div.title-outer{
  16. position:relative;
  17. top:50%;
  18. height:30px;
  19. }
  20. span.title{
  21. text-align:left;
  22. position:relative;
  23. left:3%;
  24. top:-50%;
  25. font-size:22px;
  26. }
  27. div.body{
  28. width:100%;
  29. }
  30. .overlay{
  31. position:absolute;
  32. top:0px;
  33. left:0px;
  34. z-index:10001;
  35. display:none;
  36. filter:alpha(opacity=60);
  37. background-color:#777;
  38. opacity:0.5;
  39. -moz-opacity:0.5;
  40. }
  41. .loading-tip{
  42. z-index:10002;
  43. position:fixed;
  44. display:none;
  45. }
  46. .loading-tipimg{
  47. width:100px;
  48. height:100px;
  49. }
  50. .modal{
  51. position:absolute;
  52. width:600px;
  53. height:360px;
  54. border:1pxsolidrgba(0,0,0,0.2);
  55. box-shadow:0px3px9pxrgba(0,0,0,0.5);
  56. display:none;
  57. z-index:10003;
  58. border-radius:6px;
  59. }

index.js

JavaScript Code复制内容到剪贴板
  1. functionrightIFrameLoad(iframe){
  2. varpHeight=getWindowInnerHeight()-$('#header').height()-5;
  3. $('div.body').height(pHeight);
  4. console.log(pHeight);
  5. }
  6. //浏览器兼容取得浏览器可视区高度
  7. functiongetWindowInnerHeight(){
  8. varwinHeight=window.innerHeight
  9. ||(document.documentElement&&document.documentElement.clientHeight)
  10. ||(document.body&&document.body.clientHeight);
  11. returnwinHeight;
  12. }
  13. //浏览器兼容取得浏览器可视区宽度
  14. functiongetWindowInnerWidth(){
  15. varwinWidth=window.innerWidth
  16. ||(document.documentElement&&document.documentElement.clientWidth)
  17. ||(document.body&&document.body.clientWidth);
  18. returnwinWidth;
  19. }
  20. /**
  21. *显示遮罩层
  22. */
  23. functionshowOverlay(){
  24. //遮罩层宽高分别为页面内容的宽高
  25. $('.overlay').css({'height':$(document).height(),'width':$(document).width()});
  26. $('.overlay').show();
  27. }
  28. /**
  29. *显示Loading提示
  30. */
  31. functionshowLoading(){
  32. //先显示遮罩层
  33. showOverlay();
  34. //Loading提示窗口居中
  35. $("#loadingTip").css('top',
  36. (getWindowInnerHeight()-$("#loadingTip").height())/2+'px');
  37. $("#loadingTip").css('left',
  38. (getWindowInnerWidth()-$("#loadingTip").width())/2+'px');
  39. $("#loadingTip").show();
  40. $(document).scroll(function(){
  41. returnfalse;
  42. });
  43. }
  44. /**
  45. *隐藏Loading提示
  46. */
  47. functionhideLoading(){
  48. $('.overlay').hide();
  49. $("#loadingTip").hide();
  50. $(document).scroll(function(){
  51. returntrue;
  52. });
  53. }
  54. /**
  55. *模拟弹出模态窗口DIV
  56. *@paraminnerHtml模态窗口HTML内容
  57. */
  58. functionshowModal(innerHtml){
  59. //取得显示模拟模态窗口用DIV
  60. vardialog=$('#modalDiv');
  61. //设置内容
  62. dialog.html(innerHtml);
  63. //模态窗口DIV窗口居中
  64. dialog.css({
  65. 'top':(getWindowInnerHeight()-dialog.height())/2+'px',
  66. 'left':(getWindowInnerWidth()-dialog.width())/2+'px'
  67. });
  68. //窗口DIV圆角
  69. dialog.find('.modal-container').css('border-radius','6px');
  70. //模态窗口关闭按钮事件
  71. dialog.find('.btn-close').click(function(){
  72. closeModal();
  73. });
  74. //显示遮罩层
  75. showOverlay();
  76. //显示遮罩层
  77. dialog.show();
  78. }
  79. /**
  80. *模拟关闭模态窗口DIV
  81. */
  82. functioncloseModal(){
  83. $('.overlay').hide();
  84. $('#modalDiv').hide();
  85. $('#modalDiv').html('');
  86. }

body.html

XML/HTML Code复制内容到剪贴板
  1. >
  2. <htmllang="zh-CN">
  3. <head>
  4. <metacharset="utf-8">
  5. <metahttp-equiv="X-UA-Commpatible"content="IE=edge">
  6. <title>body页面title>
  7. <styletype="text/css">
  8. *{
  9. margin:0;
  10. padding:0;
  11. }
  12. html,body{
  13. width:100%;
  14. height:100%;
  15. }
  16. .outer{
  17. width:200px;
  18. height:120px;
  19. position:relative;
  20. top:50%;
  21. left:50%;
  22. }
  23. .inner{
  24. width:200px;
  25. height:120px;
  26. position:relative;
  27. top:-50%;
  28. left:-50%;
  29. }
  30. .button{
  31. width:200px;
  32. height:40px;
  33. position:relative;
  34. }
  35. .button#btnShowLoading{
  36. top:0;
  37. }
  38. .button#btnShowModal{
  39. top:30%;
  40. }
  41. style>
  42. <scripttype="text/javascript">
  43. functionshowOverlay(){
  44. //调用父窗口显示遮罩层和Loading提示
  45. window.top.window.showLoading();
  46. //使用定时器模拟关闭Loading提示
  47. setTimeout(function(){
  48. window.top.window.hideLoading();
  49. },3000);
  50. }
  51. functionshowModal(){
  52. //调用父窗口方法模拟弹出模态窗口
  53. window.top.showModal($('#modalContent').html());
  54. }
  55. script>
  56. head>
  57. <body>
  58. <divclass='outer'>
  59. <divclass='inner'>
  60. <buttonid='btnShowLoading'class='button'onclick='showOverlay();'>点击弹出遮罩层button>
  61. <buttonid='btnShowModal'class='button'onclick='showModal();'>点击弹出模态窗口button>
  62. div>
  63. div>
  64. <divid='modalContent'style='display:none;'>
  65. <divclass='modal-container'style='width:100%;height:100%;background-color:white;'>
  66. <divstyle='width:100%;height:49px;position:relative;left:50%;top:50%;'>
  67. <spanstyle='font-size:36px;width:100%;text-align:center;display:inline-block;position:inherit;left:-50%;top:-50%;'>模态窗口1span>
  68. div>
  69. <buttonclass='btn-close'style='width:100px;height:30px;position:absolute;right:30px;bottom:20px;'>关闭button>
  70. div>
  71. div>
  72. <scripttype='text/javascript'src="js/jquery-1.10.2.js">script>
  73. body>
  74. html>

运行结果:

初始化

显示遮罩层和Loading提示

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/haoqipeng/p/html-overlay.html

文章来源:https://www.jb51.net/web/444162.html

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://www.jcdi.cn/HTMLXhtml/248270.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码