应优先使用HTML5的元素配合showModal()实现模态框，其自动创建半透明遮罩层并禁用背景交互；兼容旧浏览器时可用div模拟结构，通过CSS z-index和JavaScript控制显隐；现代浏览器可添加backdrop-filter实现毛玻璃效果。
如果您希望在网页中创建一个模态框弹窗，同时确保背景内容不可交互且被半透明遮罩层覆盖，则需要结合 HTML5 语义结构、CSS 层叠控制与 JavaScript 事件逻辑。以下是实现该效果的具体步骤：
一、使用原生 HTML5 dialog 元素
HTML5 新增了
1、在 HTML 中添加
2、添加一个触发按钮：
立即学习“前端免费学习笔记（深入）”；
3、通过 JavaScript 绑定打开与关闭行为：
const dialog = document.getElementById('myDialog');
document.getElementById('openBtn').onclick = () => dialog.showModal();
document.getElementById('closeBtn').onclick = () => dialog.close();
4、为
二、纯 CSS + JavaScript 自定义模态框
当需要兼容不支持
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;
}
}
