HTML5模态框弹窗实现与遮罩层设置指南

1、构建 HTML 结构：

2、设置 CSS 样式，确保遮罩层覆盖整个视口且 z-index 高于页面其他元素：
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
  display: none;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: none;
}

3、编写 JavaScript 控制显隐逻辑：
const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
const openBtn = document.querySelector('[data-open-modal]');
const closeBtn = document.querySelector('.close');
openBtn.onclick = () => {
  overlay.style.display = 'block';
  modal.style.display = 'block';
};
closeBtn.onclick = () => {
  overlay.style.display = 'none';
  modal.style.display = 'none';
};
overlay.onclick = () => {
  overlay.style.display = 'none';
  modal.style.display = 'none';
};

三、使用 CSS backdrop-filter 实现毛玻璃遮罩效果

在支持 backdrop-filter 的现代浏览器中，可在遮罩层上叠加模糊背景，增强视觉层次感，同时保持主体内容可读性。

1、为遮罩层添加 backdrop-filter 属性：
.overlay {
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

2、确保父容器启用硬件加速以提升渲染性能：
body {
  transform: translateZ(0);
}

3、检查浏览器兼容性，对不支持的环境降级为普通半透明遮罩：
@supports not (backdrop-filter: blur(1px)) {
  .overlay {
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: none;
  }
}

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~