HTML实现遮罩层的完整教程与iframe应用
121 浏览量
更新于2024-09-02
收藏 101KB PDF 举报
在HTML中实现遮罩层是一种常见的网页设计技术，它主要用于提升用户体验，特别是在进行某些操作如加载数据、确认框或者模态窗口时，提供视觉反馈，避免用户误触其他元素。遮罩层通常由一个透明度较高的`<div>`元素构成，可以覆盖在页面上，阻止用户交互。
首先，让我们来理解如何在HTML中创建一个基础的遮罩层。以下步骤会带你通过一个简单的示例来实现：
1. **HTML结构**:
- 在`<body>`标签内，创建两个`<div>`元素，一个是`<div id="overlay" class="overlay">`作为遮罩层，另一个是`<div id="loadingTip">`用于显示loading提示。
```html
<div id="overlay" class="overlay"></div>
<div id="loadingTip">加载中...</div>
```
2. **CSS样式**:
- 遮罩层的CSS可能包括设置其宽度、高度、背景颜色（通常是半透明或全透明），以及定位和显示样式，例如设置`position: fixed; top: 0; left: 0; right: 0; bottom: 0;`使其覆盖整个屏幕，同时设置`opacity`或`filter`属性调整透明度。
- Loading提示的CSS则可能包括动画效果，比如显示一个动态的GIF图片，可以设置`display: none;`初始状态，然后在需要时通过JavaScript切换显示。
3. **JavaScript控制**:
- JavaScript负责遮罩层的显示与隐藏。例如，在`<iframe>`标签的`onload`事件中，可以添加逻辑来在加载完成时显示遮罩层，并在操作完成后隐藏它。
```javascript
function rightIFrameLoad(iframe) {
document.getElementById('overlay').style.display = 'block'; // 显示遮罩层
// ...在操作完成时隐藏遮罩层
setTimeout(() => {
document.getElementById('overlay').style.display = 'none';
}, 2000); // 假设操作需要2秒完成，可根据实际情况调整时间
}
```
4. **跨iframe通信**:
- 如果遮罩层是在嵌入的iframe中使用的，确保通过`window.parent`或`window.top`对象正确地控制父页面中的遮罩层。上述示例中的`rightIFrameLoad`函数接收`iframe`对象作为参数，可以通过`iframe.contentWindow`访问到子页面的全局对象。
5. **遮罩层的交互性**:
- 遮罩层可以配合JavaScript事件处理程序，例如点击遮罩层时关闭loading或执行其他操作。可以设置`<div id="overlay" onclick="handleClick()">`并在`handleClick`函数中处理遮罩层的交互行为。
通过以上步骤，你可以在HTML页面中实现一个功能性的遮罩层，有效增强用户的操作体验。记住，这只是一个基础示例，实际应用中可能需要根据具体需求进行调整，如添加动画效果、支持响应式设计等。
HTML实现遮罩层的方法实现遮罩层的方法 HTML中如何使用遮罩层中如何使用遮罩层
主要为大家详细介绍了HTML实现遮罩层的方法，Web页面中使用遮罩层，可防止重复操作，那么如何在HTML
中使用遮罩层？感兴趣的小伙伴们可以参考一下
Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。
实现思路：实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中
调用显示和隐藏遮罩层。
示例代码：
index.html
XML/HTML Code复制内容到剪贴板
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遮罩层</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. <!-- 遮罩层DIV -->
25. <div id="overlay" class="overlay"></div>
26. <!-- Loading提示 DIV -->
27. <div id="loadingTip" class="loading-tip">
28. <img src="images/loading.gif" />
29. </div>
30.
31. <!-- 模拟模态窗口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 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.
下载后可阅读完整内容，剩余6页未读，立即下载
2020-10-24 上传
340 浏览量
2020-11-24 上传
2021-01-19 上传
2020-11-26 上传
2020-10-18 上传
weixin_38553431
- 粉丝: 6
- 资源: 897
我的内容管理
展开
