<dialog>需JavaScript控制显隐，showModal()加遮罩禁用背景，show()无遮罩，open属性不推荐；关闭按钮须绑定close()清理状态；需ARIA增强可访问性；Safari旧版需降级处理。
dialog元素必须配合JavaScript才能显示
HTML的<dialog>默认是隐藏的，即使写在DOM里也不会自动弹出——它不像<alert()>那样有内置行为。浏览器只提供语义化容器和基础样式（比如居中、带 backdrop），所有显隐控制都得靠JS调用show()、showModal()或close()方法。
常见错误是只写HTML结构却忘了加JS，结果页面完全看不到弹窗。正确做法是：先确保<dialog>有id，再用document.getElementById().showModal()触发。
-
showModal()会加灰色遮罩、禁用背景交互，适合提醒类场景 -
show()不加遮罩，背景仍可点击，一般用于工具提示 - 直接设置
open属性（如<dialog open>）虽能初始显示，但无法触发backdrop，且关闭后状态不会自动清除，不推荐
关闭按钮必须显式绑定close()，不能只靠Esc或点击遮罩
虽然showModal()后按Esc或点遮罩层会触发关闭，但这是浏览器默认行为，不等于“已执行close()”。如果弹窗里有表单或计时器，仅依赖Esc关闭会导致状态残留——比如用户点了“稍后提醒”，弹窗消失但定时器没清理。
务必为关闭按钮（包括<button>X</button>或“取消”按钮）绑定click事件，并调用dialog.close()：
立即学习“前端免费学习笔记（深入）”；
const dialog = document.getElementById('reminder-dialog');
document.getElementById('close-btn').addEventListener('click', () => {
dialog.close();
});
注意：close()会触发close事件，可用于清理逻辑；而cancel事件只在Esc或点击遮罩时触发，二者不要混用。
dialog内容需包含role="alert"或aria-live提升可访问性
日程提醒属于中断型通知，屏幕阅读器用户需要立刻感知。单纯用<dialog>语义不够，必须补充ARIA属性：
- 添加
role="alert"让阅读器强制播报内容（适用于简短提醒，如“会议还有5分钟”） - 若内容动态更新（如倒计时），用
aria-live="assertive"并保持aria-atomic="true" - 避免把整个
<dialog>设为role="alert"——它本身已是role="dialog"，重复声明会覆盖原语义
示例结构：
<dialog id="reminder-dialog" aria-labelledby="reminder-title"> <h3 id="reminder-title">日程提醒</h3> <p role="alert">您预约的「项目评审」将在5分钟后开始</p> <button id="close-btn">忽略</button> </dialog>
移动端Safari对dialog支持有限，需降级方案
Safari 15.4+才支持<dialog>，旧版iOS Safari（包括部分iPadOS）完全不识别，会把它当普通<div>渲染——既无遮罩也无居中，还可能破坏布局。
检测方式很简单：
if (!('showModal' in HTMLDialogElement.prototype)) {
// 加载polyfill或回退到div+CSS模拟
fallbackToCustomModal();
}
轻量级处理建议：
- 用
@supports (display: dialog)在CSS中做样式隔离，避免旧浏览器错乱 - 不强依赖
<dialog>动画，它的transition支持度比CSS自定义弹窗差得多 - 如果项目必须兼容iOS 14及以下，直接用
<div class="modal">+ 手动管理z-index和inert更稳妥
别指望dialog自动解决所有兼容问题，尤其当用户群体含大量iPhone老设备时，检测和降级是必选项。
