当前位置：首页 > JavaScript

js实现遮罩

2026-03-14 16:50:00JavaScript

使用 CSS 和 JavaScript 创建遮罩层

通过动态添加 DOM 元素和 CSS 样式实现遮罩效果。HTML 部分只需基础结构，JavaScript 动态创建遮罩元素。

<!DOCTYPE html>
<html>
<head>
  <style>
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      display: none;
    }
    .content {
      position: relative;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="content">
    <button id="showMask">显示遮罩</button>
  </div>

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

    document.getElementById('showMask').addEventListener('click', () => {
      mask.style.display = 'block';
    });

    mask.addEventListener('click', () => {
      mask.style.display = 'none';
    });
  </script>
</body>
</html>

带关闭按钮的遮罩层

在遮罩层中添加关闭按钮，提供更明确的交互方式。

<div class="mask">
  <span class="close-btn">&times;</span>
</div>

<style>
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none;
  }
  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
  }
</style>

<script>
  const mask = document.querySelector('.mask');
  const closeBtn = document.querySelector('.close-btn');

  document.getElementById('showMask').addEventListener('click', () => {
    mask.style.display = 'block';
  });

  closeBtn.addEventListener('click', () => {
    mask.style.display = 'none';
  });
</script>

动画效果的遮罩层

使用 CSS transition 或 animation 为遮罩添加显示/隐藏动画效果。

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

function toggleMask() {
  const mask = document.querySelector('.mask');
  mask.classList.toggle('show');
}

模态框结合遮罩

创建常见的模态对话框，配合遮罩层使用。

<div class="mask">
  <div class="modal">
    <h3>提示</h3>
    <p>这是一个模态对话框</p>
    <button class="close-modal">关闭</button>
  </div>
</div>

<style>
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    z-index: 1001;
    border-radius: 5px;
  }
</style>

<script>
  document.querySelector('.close-modal').addEventListener('click', () => {
    document.querySelector('.mask').style.display = 'none';
  });
</script>

响应式遮罩层

确保遮罩在不同设备上都能正常显示，添加视口 meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media (max-width: 768px) {
  .mask {
    background-color: rgba(0, 0, 0, 0.8);
  }
  .modal {
    width: 90%;
  }
}

防止滚动穿透

当遮罩显示时，禁止页面滚动。

js实现遮罩

function showMask() {
  document.querySelector('.mask').style.display = 'block';
  document.body.style.overflow = 'hidden';
}

function hideMask() {
  document.querySelector('.mask').style.display = 'none';
  document.body.style.overflow = '';
}

标签: js