元素必须通过 showmodal() 或 show() 方法控制显隐，不能用 css display；需挂载 dom、检查 dialog.open、用 close() 关闭；兼容性差，safari 15.4+ 才支持 showmodal()，旧版需降级实现，并手动处理 esc、backdrop 点击、焦点及无障碍。
dialog 元素不能直接用 ID 触发显示
HTML <dialog></dialog> 不像 <div> 那样支持通过 CSS ID 选择器 + <code>display: block 控制显隐。它有独立的 API，必须调用原生方法才能打开/关闭，否则即使设置了 id="myDialog"，仅靠 CSS 或纯 HTML 无法激活弹窗。
常见错误是写完 <dialog id="alert">...</dialog> 后试图用 document.getElementById('alert').style.display = 'block'，这会导致样式错乱、无 backdrop、无法聚焦、Esc 键失效，且浏览器控制台可能报 Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a document 类似警告。
必须用 show() 或 showModal() 方法控制
show() 显示非模态对话框（可同时操作页面其他区域），showModal() 显示模态对话框（带半透明遮罩、强制聚焦、拦截 Esc/点击 backdrop 关闭）——绝大多数场景应选 showModal()。
- 元素必须已挂载到 DOM 中（不能是 document fragment 或未 append 的节点）
- 调用前建议检查
dialog.open === false，避免重复调用导致异常 -
showModal()会自动将焦点移到 dialog 内第一个可聚焦元素，若没有，需手动设置tabindex="-1"并.focus() - 关闭只能用
dialog.close()，不能用remove()或innerHTML = ''，否则后续无法再调用showModal()
示例：
<dialog id="confirmDialog"><p>确定要删除吗？</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/178995432594388.jpg" alt="Pptx To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="overflowclass">Pptx To Html</a>
<p class="overflowclass">使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<button id="confirmBtn">确认</button>
<button id="cancelBtn">取消</button>
</dialog><script>
const dialog = document.getElementById('confirmDialog');
document.getElementById('confirmBtn').onclick = () => {
dialog.close();
};
document.getElementById('cancelBtn').onclick = () => {
dialog.close();
};
// 触发方式（比如点击某个按钮）
document.getElementById('triggerBtn').onclick = () => {
if (!dialog.open) dialog.showModal();
};
</script>
兼容性与 fallback 必须手动处理
<dialog></dialog> 在 Safari 15.4+ 才完全支持 showModal()，旧版 Safari 和 IE 完全不支持。Chrome/Firefox 支持良好，但 Firefox 默认不启用 backdrop（需配合 ::backdrop CSS 手动补全）。
- 检测支持：用
'showModal' in HTMLDialogElement.prototype判断 - 不支持时，可降级为
position: fixed+ 手动管理 focus/escape/backdrop - 不要依赖
<dialog></dialog>的默认样式，务必重置border、padding、margin，并显式设置width/max-width - Safari 中
dialog::backdrop无效，需额外加一层<div class="backdrop"> 并用 JS 控制显隐 <h3>关闭逻辑容易漏掉的三个点</h3> <p>用户习惯按 Esc、点遮罩层、点右上角 × —— 这些行为不会自动触发 <code>close()，除非你显式监听。- 监听
keydown捕获 Esc：dialog.addEventListener('keydown', e => e.key === 'Escape' && dialog.close()) - 监听 backdrop 点击（仅 Chrome/Firefox）：
dialog.addEventListener('click', e => e.target === dialog && dialog.close()) - 右上角 × 按钮必须是 dialog 内部的
<button></button>，且不能用type="submit"（会触发表单提交）；推荐统一用type="button"
没处理这些，用户会觉得弹窗“关不掉”，尤其在移动端点击空白处毫无反应，实际是事件没绑定到正确目标上。
真正麻烦的是跨浏览器一致的行为模拟，不是写个
dialog.showModal()就完事——焦点管理、键盘导航、屏幕阅读器支持、backdrop 透明度、关闭后滚动恢复，每个点都得单独验证。 - 监听
