(HTML+js+css)遮罩层实现源码_html遮罩层资源-CSDN文库

共8个文件

html：4个

js：2个

gif：1个

需积分: 50 35 浏览量 2016-04-26 09:22:00 上传评论收藏 88KB ZIP 举报

HTML遮罩层是一种常见的网页设计元素，用于在页面上创建一个半透明或全透明的覆盖层，以便在用户与特定内容交互时提供视觉焦点或显示额外信息。在本实例中，我们将探讨如何通过HTML、JavaScript和CSS来实现一个完整的遮罩层功能，包括loading提示和模拟模态窗口。让我们从HTML结构开始。一个简单的遮罩层通常包含一个主容器（例如一个`div`元素）以及可能的子元素，如模态窗口或加载指示器。下面是一个基础的HTML布局： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>遮罩层实现</title> <link rel="stylesheet" href="overlay.css"> </head> <body> <div id="content">  </div> <div id="mask"></div> <div id="modal"> <div id="loading"> <span>Loading...</span> </div> <div id="modal-content">  </div> </div> <script src="overlay.js"></script> </body> </html> ``` 接下来是CSS部分。`#mask`是遮罩层元素，通常设置为全屏并具有一定的透明度。`#modal`是模态窗口，可以设置定位使其居中。加载指示器`#loading`和模态窗口内容`#modal-content`可以根据需求自定义样式： ```css /* overlay.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } #mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; display: none; /* 默认隐藏 */ } #modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 5px; width: 400px; z-index: 1000; display: none; /* 默认隐藏 */ } #loading { text-align: center; margin-bottom: 10px; } #modal-content { /* 自定义模态窗口内容样式 */ } ``` 我们使用JavaScript来控制遮罩层和模态窗口的显示与隐藏。例如，当需要显示遮罩层和加载提示时，我们可以编写以下代码： ```javascript // overlay.js function showOverlay() { document.getElementById('mask').style.display = 'block'; document.getElementById('modal').style.display = 'block'; } function hideOverlay() { document.getElementById('mask').style.display = 'none'; document.getElementById('modal').style.display = 'none'; } // 示例：点击按钮显示遮罩层 document.getElementById('myButton').addEventListener('click', function() { showOverlay(); // 在这里执行加载操作，完成后调用hideOverlay() }); // 示例：加载完成后关闭遮罩层 window.onload = function() { setTimeout(function() { hideOverlay(); }, 2000); // 2秒后自动关闭 }; ``` 以上代码展示了如何通过JavaScript监听事件并在适当的时候显示或隐藏遮罩层。你可以根据项目需求调整这些示例，例如添加动画效果、交互逻辑等。在实际开发中，遮罩层的应用非常广泛，如加载提示、弹窗提示、表单验证错误提示等。通过熟练掌握HTML、CSS和JavaScript的组合，你可以创建出各种各样的遮罩层效果，提高用户体验。这个压缩包中的源码应该包含了所有实现上述功能的必要文件，你可以下载后进行详细研究和实践。

资源推荐

资源详情

资源评论

收起资源包目录

html+js+css遮罩层源码.zip （8个子文件）

overlay_

index.html 1KB

modal.html 985B

body.html 2KB

images

loading.gif 8KB

index.js 2KB

jquery-1.10.2.js 267KB

body_2.html 819B

css

index.css 921B

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Commpatible" content="IE=edge"> <title>body 页面</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .outer { width: 200px; height: 120px; position: relative; top: 50%; left: 50%; } .inner { width: 200px; height: 120px; position: relative; top: -50%; left: -50%; } .button { width: 200px; height: 40px; position: relative; } .button#btnShowLoading { top: 0; } .button#btnShowModal { top: 30%; } </style> <script type="text/javascript"> function showOverlay() { // 调用父窗口显示遮罩层和Loading提示 window.top.window.showLoading(); // 使用定时器模拟关闭Loading提示 setTimeout(function() { window.top.window.hideLoading(); }, 30000); } function showModal() { // 调用父窗口方法模拟弹出模态窗口 window.top.showModal($('#modalContent').html()); } </script> </head> <body> <div class='outer'> <div class='inner'> <button id='btnShowLoading' class='button' onclick='showOverlay();'>点击弹出遮罩层</button> <button id='btnShowModal' class='button' onclick='showModal();'>点击弹出模态窗口</button> </div> </div>  <div id='modalContent' style='display: none;'> <div class='modal-container' style='width: 100%;height: 100%;background-color: white;'> <div style='width: 100%;height: 49px;position: relative;left: 50%;top: 50%;'> <span style='font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;'>模态窗口1</span> </div> <button class='btn-close' style='width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px;'>关闭</button> </div> </div> <script type='text/javascript' src="js/jquery-1.10.2.js"></script> </body> </html>

评论收藏

内容反馈