js实现遮罩效果

使用CSS和JavaScript实现遮罩效果

通过CSS定义一个遮罩层样式，通常设置为半透明黑色背景，覆盖整个视口：

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

基础遮罩实现

创建遮罩元素并添加到DOM中：

const mask = document.createElement('div');
mask.className = 'mask';
document.body.appendChild(mask);

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

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

带内容框的遮罩

在遮罩层中添加内容容器：

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 1001;
}

const modal = document.createElement('div');
modal.className = 'modal-content';
modal.innerHTML = '<p>这是弹窗内容</p><button class="close-btn">关闭</button>';
document.body.appendChild(modal);

document.querySelector('.close-btn').addEventListener('click', hideMask);

function showMask() {
  mask.style.display = 'block';
  modal.style.display = 'block';
}

function hideMask() {
  mask.style.display = 'none';
  modal.style.display = 'none';
}

点击遮罩关闭功能

为遮罩添加点击事件，点击时关闭：

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

动画效果增强

添加CSS过渡效果使显示更平滑：

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

.mask.show {
  opacity: 1;
}

.modal-content {
  opacity: 0;
  transform: translate(-50%, -45%);
  transition: all 0.3s ease;
}

.modal-content.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}

function showMask() {
  mask.classList.add('show');
  modal.classList.add('show');
  mask.style.display = 'block';
  modal.style.display = 'block';
}

function hideMask() {
  mask.classList.remove('show');
  modal.classList.remove('show');
  setTimeout(() => {
    mask.style.display = 'none';
    modal.style.display = 'none';
  }, 300);
}

防止背景滚动

显示遮罩时禁止页面滚动：

function showMask() {
  document.body.style.overflow = 'hidden';
  // 其他显示逻辑...
}

function hideMask() {
  document.body.style.overflow = '';
  // 其他隐藏逻辑...
}