遮罩层可以用来覆盖在页面上方,以阻止用户对页面中某些内容的操作,常见的使用场景包括:
-
模态框:当弹出模态框时,遮罩层可以覆盖在整个页面上,使得用户只能与模态框交互,从而实现了浮层的视觉效果。
-
页面加载过程中:当页面需要加载一些耗时资源(如图片、视频等)时,可以使用遮罩层提示用户页面正在加载中。
-
登录/注册框:当网站需要用户登录或者注册时,可以使用遮罩层覆盖在页面上方,防止用户直接点击其他链接跳转到其他页面。
以下是一个简单的使用遮罩层的示例代码,当按钮被点击时,会显示一个遮罩层:
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
,以显示遮罩层。