原生js创建遮罩层的方式

最新推荐文章于 2025-10-26 14:21:08 发布

原创最新推荐文章于 2025-10-26 14:21:08 发布 · 812 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #linux

收录于

需求:

使用原生js创建遮罩层.

答案:

// 添加遮罩层
const addOverlay = () => {
  const overlay = document.createElement('div');
  overlay.className = 'overlay';
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  overlay.style.zIndex = '20';
  document.body.appendChild(overlay);
}

将遮罩层添加在body元素下面