当前位置：首页 > JavaScript

js实现遮罩

2026-04-06 10:39:42JavaScript

使用CSS和HTML创建遮罩层

在HTML中添加一个遮罩层的div元素，通常放在body的最后部分以确保覆盖其他内容：

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

为遮罩层添加CSS样式，使其覆盖整个视窗并半透明：

js实现遮罩

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

控制遮罩层的显示与隐藏

使用JavaScript控制遮罩层的显示和隐藏：

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

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

点击遮罩层关闭功能

为遮罩层添加点击事件，点击时隐藏遮罩层：

js实现遮罩

document.getElementById('mask').addEventListener('click', function() {
  hideMask();
});

配合模态框使用

遮罩层常与模态框配合使用，需要阻止事件冒泡：

<div id="modal" class="modal">
  <!-- 模态框内容 -->
</div>

document.getElementById('modal').addEventListener('click', function(e) {
  e.stopPropagation();
});

动画效果增强

为遮罩层添加淡入淡出动画效果：

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

.mask.show {
  opacity: 1;
}

function showMask() {
  const mask = document.getElementById('mask');
  mask.style.display = 'block';
  setTimeout(() => mask.classList.add('show'), 10);
}

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

标签: js