当前位置：首页 > JavaScript

js实现遮罩

2026-02-01 17:42:44JavaScript

使用CSS和HTML创建基础遮罩结构

HTML部分定义一个遮罩层和一个内容层：

<div class="mask"></div>
<div class="content">这是页面内容</div>

CSS部分设置遮罩样式：

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

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

通过JavaScript控制遮罩显示/隐藏

基础显示和隐藏功能：

js实现遮罩

const mask = document.querySelector('.mask');

// 显示遮罩
function showMask() {
  mask.style.display = 'block';
}

// 隐藏遮罩
function hideMask() {
  mask.style.display = 'none';
}

添加点击事件关闭遮罩

为遮罩添加点击关闭功能：

mask.addEventListener('click', function(e) {
  if(e.target === mask) {
    hideMask();
  }
});

结合弹窗使用遮罩

创建带遮罩的弹窗组件：

js实现遮罩

<div class="mask" id="mask"></div>
<div class="modal" id="modal">
  <div class="modal-content">弹窗内容</div>
  <button class="close-btn">关闭</button>
</div>

const modal = document.getElementById('modal');
const closeBtn = document.querySelector('.close-btn');

function showModal() {
  document.getElementById('mask').style.display = 'block';
  modal.style.display = 'block';
}

closeBtn.addEventListener('click', function() {
  document.getElementById('mask').style.display = 'none';
  modal.style.display = 'none';
});

动画效果增强

为遮罩添加淡入淡出效果：

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

.mask.show {
  opacity: 1;
}

function showMaskWithAnimation() {
  mask.classList.add('show');
}

function hideMaskWithAnimation() {
  mask.classList.remove('show');
}

高级用法：动态创建遮罩

通过JavaScript动态创建遮罩元素：

function createDynamicMask() {
  const mask = document.createElement('div');
  mask.className = 'dynamic-mask';
  mask.style.position = 'fixed';
  mask.style.top = '0';
  mask.style.left = '0';
  mask.style.width = '100%';
  mask.style.height = '100%';
  mask.style.backgroundColor = 'rgba(0,0,0,0.7)';
  mask.style.zIndex = '1000';
  document.body.appendChild(mask);

  return mask;
}

标签: js