【免费】javascrip实现t遮盖层资源-CSDN文库

共2个文件

html：1个

jpg：1个

需积分: 0 200 浏览量更新于2010-08-13 收藏 242KB RAR 举报

在JavaScript中实现遮盖层（通常称为“蒙层”或“overlay”）是一种常见的网页交互设计，用于在用户进行特定操作（如登录、确认、加载数据等）时提供视觉反馈，确保用户注意力集中于弹出的窗口而暂时阻止对背景页面的交互。下面将详细介绍如何使用JavaScript来创建这样的遮盖层效果。我们需要在HTML中设置基本结构。一个简单的遮盖层HTML布局可能包括一个`<div>`元素作为遮盖层和一个登录窗口`<div>`： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JavaScript遮盖层实现</title> <style> .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 999; } .login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); z-index: 1000; } </style> </head> <body>  <button id="login-btn">登录</button> <div class="overlay" id="overlay"></div> <div class="login-box" id="login-box"> <h3>登录</h3> <input type="text" placeholder="用户名" /> <input type="password" placeholder="密码" /> <button>提交</button> </div> <script src="遮盖层.js"></script> </body> </html> ``` 在上述代码中，`.overlay` 是遮盖层，设置为全屏且半透明，`z-index` 属性保证它位于页面内容之上。`.login-box` 是登录窗口，居中显示，`z-index` 更高，使其位于遮盖层之上。接下来，我们编写JavaScript代码（`遮盖层.js`）来处理点击按钮显示/隐藏遮盖层和登录框： ```javascript document.getElementById('login-btn').addEventListener('click', function() { var overlay = document.getElementById('overlay'); var loginBox = document.getElementById('login-box'); overlay.style.display = 'block'; loginBox.style.display = 'block'; }); document.getElementById('login-box').addEventListener('click', function(event) { if (event.target === this) { closeLogin(); } }); function closeLogin() { var overlay = document.getElementById('overlay'); var loginBox = document.getElementById('login-box'); overlay.style.display = 'none'; loginBox.style.display = 'none'; } // 可以添加键盘事件，比如Esc键关闭遮盖层 document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { closeLogin(); } }); ``` 在这个JavaScript代码中，我们为登录按钮添加了点击事件监听器，当用户点击按钮时，遮盖层和登录框显示。同时，我们在登录框上添加了一个点击事件监听器，如果用户点击了登录框以外的区域，会调用`closeLogin`函数隐藏它们。此外，我们还添加了一个键盘事件监听器，使得用户按下Esc键也能关闭遮盖层和登录框。在实际项目中，可以进一步优化这个实现，例如添加动画效果、处理用户输入的登录信息、验证等功能。DLC-1.JPG 文件可能是登录框的截图或者示例图片，用于辅助理解登录框的设计。通过这种方式，我们可以利用JavaScript轻松地实现在网页中创建具有遮盖层效果的登录窗口，提供良好的用户体验。

收起资源包目录