当前位置：首页 > JavaScript

js实现遮罩层

2026-03-01 06:11:32JavaScript

实现遮罩层的基本方法

使用HTML和CSS创建遮罩层的结构，通过JavaScript控制显示和隐藏。遮罩层通常是一个覆盖整个屏幕的半透明层，用于阻止用户与底层内容交互。

<div id="mask" class="mask"></div>

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

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

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

结合模态框使用

遮罩层常与模态框配合使用，点击遮罩层时关闭模态框和遮罩层。

js实现遮罩层

document.getElementById('mask').addEventListener('click', function() {
  hideMask();
  // 同时隐藏模态框
  document.getElementById('modal').style.display = 'none';
});

动态创建遮罩层

通过JavaScript动态创建遮罩层元素，避免修改HTML结构。

js实现遮罩层

function createMask() {
  const mask = document.createElement('div');
  mask.id = 'mask';
  mask.className = 'mask';
  document.body.appendChild(mask);
  return mask;
}

// 使用示例
const mask = createMask();
mask.style.display = 'block';

高级控制选项

为遮罩层添加更多控制选项，如透明度、颜色和点击行为。

function showMask(options = {}) {
  const mask = document.getElementById('mask') || createMask();
  mask.style.display = 'block';
  mask.style.backgroundColor = options.color || 'rgba(0, 0, 0, 0.5)';
  mask.style.opacity = options.opacity || '1';
  mask.onclick = options.onClick || function() { hideMask(); };
}

动画效果

为遮罩层的显示和隐藏添加淡入淡出动画效果。

.mask {
  transition: opacity 0.3s ease;
}

.mask.fade-out {
  opacity: 0;
}

function fadeInMask() {
  const mask = document.getElementById('mask');
  mask.style.display = 'block';
  setTimeout(() => { mask.style.opacity = '1'; }, 10);
}

function fadeOutMask() {
  const mask = document.getElementById('mask');
  mask.style.opacity = '0';
  setTimeout(() => { mask.style.display = 'none'; }, 300);
}