Dialog 标签不自动锁定背景，需手动通过 CSS 类控制 body 滚动、用 showModal() 触发模态、结合 ::backdrop 和事件完善焦点与 backdrop 交互。
Dialog 标签本身不自动锁定背景，需配合 CSS 和 JavaScript 手动控制滚动与焦点。它提供语义化、可访问的模态基础，但“背景禁用”不是内置行为，必须开发者显式实现。
1. 基础 Dialog 结构与显示控制
使用 <dialog> 元素包裹内容，通过 .showModal() 方法以模态方式打开（会自动居中、添加 backdrop）：
<dialog id="myDialog">
<p>这是一个原生对话框</p>
<button id="closeBtn">关闭</button>
</dialog>
<p><button id="openBtn">打开对话框</button></p><p><script>
const dialog = document.getElementById('myDialog');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');</p><p>openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());
</script>注意：.showModal() 是关键——它让 dialog 进入模态状态，触发浏览器默认 backdrop（半透明遮罩），并暂停 tab 键对 dialog 外部元素的聚焦。
立即学习“前端免费学习笔记（深入）”；
2. 锁定背景滚动（防止页面随对话框滚动）
Dialog 打开时，body 默认仍可滚动。需在打开时添加 overflow: hidden，关闭时恢复：
- 监听
dialog的open和close事件（或直接在 JS 中同步控制） - 推荐在
showModal()后立即设置 body 样式，避免视觉闪动 - 用 CSS class 管理更稳妥（便于复用和媒体查询适配）
/* CSS */
body.dialog-open {
overflow: hidden;
}
<p>/<em> JS </em>/
openBtn.addEventListener('click', () => {
document.body.classList.add('dialog-open');
dialog.showModal();
});</p><p>dialog.addEventListener('close', () => {
document.body.classList.remove('dialog-open');
});3. 增强可访问性：焦点管理与 Esc/Backdrop 关闭
原生 dialog 已支持部分可访问特性（如自动聚焦首个可聚焦子元素、Esc 关闭），但需确保：
- dialog 内至少有一个可聚焦元素（如按钮、输入框），否则焦点可能跳到 body
- 点击 backdrop 默认关闭 dialog（Chrome/Firefox 支持，Safari 需 polyfill 或监听
click判断是否点在 backdrop 上） - 手动捕获 backdrop 点击（兼容 Safari）：
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});也可监听 keydown 显式处理 Esc，但通常非必需（showModal() 已内置）。
4. 样式定制与 backdrop 控制
通过伪元素 ::backdrop 自定义遮罩层样式：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
animation: fade-in 0.2s ease;
}
<p>@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}</p><p>dialog {
border: none;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-width: 90vw;
}注意：dialog 默认无 margin/padding，需自行设定；max-width 和 min-width 可防止小屏过窄或大屏过宽。
不复杂但容易忽略——dialog 是轻量级原生方案，但背景锁定、焦点流、Safari 兼容性这些细节必须手写补全。核心就是三件事：用 showModal 触发模态、用 class 锁 body 滚动、用 ::backdrop 和事件完善交互体验。
