dialog 有两种用法：直接 open 属性展示（非模态，不挡背景），或调用 showModal() 方法（模态，出现遮罩并屏蔽背景交互，且自动聚焦首个可聚焦元素）。关闭用 close() 方法，reason 参数会传给 close 事件。form 加 method=dialog 放进对话框里时，提交即关闭，按钮 value 还能作为关闭原因传过来。
原生 dialog 相比自己拿 div 蒙层的方案，优势集中在无障碍：浏览器自动管理焦点陷阱（Tab 出不去）、Esc 键关闭、ARIA 角色内建，这些自己实现都容易漏。配合 ::backdrop 伪元素可以自定义遮罩样式。需要注意关闭后焦点会回到打开按钮，这一行为也是无障碍规范的一部分，各浏览器对该标签的支持早已稳定，新项目可以放心替代手写蒙层。
<style> dialog.dg { border: 2px solid #4a9eff; border-radius: 12px; padding: 18px; width: 280px; } dialog.dg::backdrop { background: rgba(0,0,0,.45); } .row { display: flex; gap: 8px; justify-content: flex-end; } .row button { padding: 5px 14px; border-radius: 6px; border: none; cursor: pointer; } .ok { background: #4a9eff; color: #fff; } .no { background: #eee; } </style> <dialog class="dg" id="dlg"> <h3 style="margin-top:0">确认删除？</h3> <p>删除后不可恢复，请谨慎操作。</p> <div class="row"> <button class="no" onclick="document.getElementById('dlg').close()">取消</button> <button class="ok" onclick="document.getElementById('dlg').close('del')">确认</button> </div> </dialog> <button onclick="document.getElementById('dlg').showModal()">打开对话框</button>