您现在的位置是：网站首页> 编程资料编程资料

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

2021-09-14 2158人已围观

简介 这篇文章主要为大家详细介绍了HTML实现遮罩层的方法，Web页面中使用遮罩层，可防止重复操作，那么如何在HTML中使用遮罩层？感兴趣的小伙伴们可以参考一下

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

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

示例代码：

index.html

XML/HTML Code复制内容到剪贴板
  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;   

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网