应优先使用HTML5的<dialog>元素配合showModal()实现模态框，其自动创建半透明遮罩层并禁用背景交互；兼容旧浏览器时可用div模拟结构，通过CSS z-index和JavaScript控制显隐；现代浏览器可添加backdrop-filter实现毛玻璃效果。
如果您希望在网页中创建一个模态框弹窗，同时确保背景内容不可交互且被半透明遮罩层覆盖，则需要结合 HTML5 语义结构、CSS 层叠控制与 JavaScript 事件逻辑。以下是实现该效果的具体步骤：
一、使用原生 HTML5 dialog 元素
HTML5 新增了 <dialog> 元素，专用于定义模态或非模态对话框，配合 showModal() 方法可自动创建遮罩层并禁用背景交互。
1、在 HTML 中添加 <dialog> 标签，并设置 id 属性以便调用：
<dialog id="myDialog"><p>这是一个 HTML5 原生模态框</p><button id="closeBtn">关闭</button></dialog>
2、添加一个触发按钮：
<button id="openBtn">打开弹窗</button>
立即学习“前端免费学习笔记（深入）”；
3、通过 JavaScript 绑定打开与关闭行为：
const dialog = document.getElementById('myDialog');
document.getElementById('openBtn').onclick = () => dialog.showModal();
document.getElementById('closeBtn').onclick = () => dialog.close();
4、为 <dialog> 添加基础样式以确保遮罩层生效：
dialog {
position: relative;
padding: 20px;
border: none;
border-radius: 8px;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
dialog::backdrop {
background-color: rgba(0,0,0,0.6);
}
二、纯 CSS + JavaScript 自定义模态框
当需要兼容不支持 <dialog> 的旧版浏览器时，可通过 div 模拟模态框结构，手动控制显示状态与遮罩层层级关系。
1、构建 HTML 结构：
<div id="overlay" class="overlay"></div>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>自定义弹窗内容</p>
</div>
</div>
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;
}
}
