HTML5的<dialog>标签需配合JavaScript使用showModal()/close()控制显隐，支持open属性静态显示，但模态行为（遮罩、焦点锁定、Esc关闭）必须调用showModal()；须设aria-labelledby、autofocus及关闭控件，并用dialog::backdrop和dialog分别定制样式。
HTML5 的 <dialog> 标签提供了原生、语义化的模态对话框支持，无需 JavaScript 框架即可实现基础弹窗，但需配合 JS 控制显示/隐藏逻辑和交互行为。
基本结构与属性说明
<dialog> 是一个语义化元素，浏览器默认将其设为 display: none。它天然支持 open 属性来控制可见性：添加该布尔属性即显示对话框，移除则隐藏。
示例结构：
<dialog id="myDialog"><p>这是一个原生模态框</p>
<button id="closeBtn">关闭</button>
</dialog>
<button id="openBtn">打开对话框</button>
用 JavaScript 控制显示与隐藏
不能仅靠 HTML 属性动态切换，必须通过 JS 调用内置方法：.showModal()（带背景遮罩、焦点锁定）、.show()（无遮罩、不锁定焦点）、.close()（关闭并触发 close 事件）。
立即学习“前端免费学习笔记（深入）”；
-
dialog.showModal()是最常用方式，自动居中、禁用背景交互、聚焦第一个可聚焦子元素 -
dialog.close()接收一个可选参数（如'cancelled'），该值会作为event.returnValue在close事件中获取 - 点击遮罩层或按 Esc 键会自动触发
close事件，无需手动监听
处理关闭逻辑与用户反馈
推荐监听 close 事件统一处理关闭后的行为，例如重置表单、更新状态或记录操作。
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());
dialog.addEventListener('close', () => {
console.log('对话框已关闭，返回值：', dialog.returnValue);
// 可在此处执行清理或后续逻辑
});
样式定制与无障碍注意事项
默认样式较简陋，可通过 CSS 自定义外观。关键点包括：
- 使用
dialog::backdrop选择器设置遮罩层背景（如background: rgba(0,0,0,0.5)） - 确保对话框内有可聚焦元素（如按钮、输入框），否则
showModal()可能无法正确锁定焦点 - 为提升可访问性，建议添加
aria-labelledby或aria-label属性标明对话框用途 - 部分旧版浏览器（如 Safari 15.4 之前）不支持
<dialog>，需考虑降级方案或 polyfill
