当前位置：首页 > JavaScript

js实现遮罩效果

2026-01-30 13:58:18JavaScript

实现遮罩效果的方法

使用CSS和HTML结构

在HTML中创建一个遮罩层和一个内容层，遮罩层覆盖整个视口，内容层位于遮罩层上方。

<div class="mask"></div>
<div class="content">需要显示的内容</div>

基础CSS样式

为遮罩层设置固定定位、全屏尺寸和半透明背景，内容层设置更高的z-index确保可见。

js实现遮罩效果

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.content {
  position: relative;
  z-index: 101;
}

动态控制显示/隐藏

通过JavaScript动态添加或移除遮罩层的显示类，实现交互控制。

const mask = document.querySelector('.mask');
function showMask() {
  mask.style.display = 'block';
}
function hideMask() {
  mask.style.display = 'none';
}

点击遮罩关闭功能

为遮罩层添加点击事件，点击时自动隐藏遮罩。

js实现遮罩效果

mask.addEventListener('click', hideMask);

高级交互扩展

结合CSS过渡效果实现淡入淡出动画，提升用户体验。

.mask {
  transition: opacity 0.3s ease;
  opacity: 0;
}
.mask.active {
  opacity: 1;
}

function toggleMask() {
  mask.classList.toggle('active');
}

弹窗组合实现

将遮罩与弹窗组件结合使用，形成完整的模态对话框效果。

<div class="mask"></div>
<div class="modal">
  <div class="modal-content">弹窗内容</div>
</div>

document.querySelector('.open-modal').addEventListener('click', () => {
  document.querySelector('.mask').style.display = 'block';
  document.querySelector('.modal').style.display = 'block';
});