2025年前端开发中遮罩层的作用和使用场景

科技前沿 • 2025-04-10 14:13 • 阅读 45

大家好，我是讯享网，很高兴认识大家。

遮罩层可以用来覆盖在页面上方，以阻止用户对页面中某些内容的操作，常见的使用场景包括：

模态框：当弹出模态框时，遮罩层可以覆盖在整个页面上，使得用户只能与模态框交互，从而实现了浮层的视觉效果。
页面加载过程中：当页面需要加载一些耗时资源（如图片、视频等）时，可以使用遮罩层提示用户页面正在加载中。
登录/注册框：当网站需要用户登录或者注册时，可以使用遮罩层覆盖在页面上方，防止用户直接点击其他链接跳转到其他页面。

以下是一个简单的使用遮罩层的示例代码，当按钮被点击时，会显示一个遮罩层：

HTML 代码：

<button id="show-overlay">显示遮罩层</button> <div id="overlay"> <p>这是一个遮罩层！</p> </div>

讯享网

CSS 代码：

讯享网#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; } #overlay p { color: white; font-size: 24px; }

JavaScript 代码：

const showOverlayBtn = document.querySelector('#show-overlay'); const overlay = document.querySelector('#overlay'); showOverlayBtn.addEventListener('click', () => { overlay.style.display = 'flex'; });

在上面的代码中，我们首先定义了一个按钮和一个遮罩层。遮罩层使用了 position: fixed 来使其固定在页面上，并且使用了半透明的黑色背景，让前景元素更加突出。

然后，在 JavaScript 中，我们监听了按钮的点击事件，并在回调函数中将遮罩层的 display 属性设置为 flex，以显示遮罩层。

2025年前端开发中遮罩层的作用和使用场景

相关推荐