dialog标签默认不显示，必须用javascript调用showmodal()触发；超时弹窗需用settimeout/setinterval监听用户空闲时长，dom就绪后启动，并在close/cancel事件中清理定时器以防止重复弹出。
dialog 标签本身不提供超时逻辑，必须靠 JavaScript 定时触发 showModal()；直接写在 HTML 里不显示，也不响应时间事件。
dialog 超时弹窗必须手动调用 showModal()
浏览器不会因为页面停留时间长就自动弹出 dialog。它只是个语义化容器，所有显示行为都得由 JS 控制。
- 超时判断必须用
setTimeout()或setInterval()监听空闲时长（比如用户 15 分钟无操作） - 触发前确保 DOM 已加载：不要在
<script></script>标签里直接调document.querySelector('dialog').showModal()，否则报Cannot read property 'showModal' of null - 推荐把定时器逻辑封装成函数，绑定到用户交互事件（
mousemove、keydown、scroll）上重置倒计时
点击遮罩或按 Esc 关闭后，如何防止重复弹出？
用户可能在倒计时中途操作页面，这时要清掉旧定时器，再启新倒计时；否则会出现多个 setTimeout 累积，导致登出提示反复弹。
- 用变量保存当前定时器 ID，每次重置前先
clearTimeout() - 监听
dialog的close事件（不是click），统一清理并重启计时逻辑 - 别只监听
Esc键——close事件也会在点击 backdrop、调用close()时触发，覆盖更全
表单提交或跳转前，必须显式关闭 dialog
超时提示常带「继续登录」和「确认登出」两个按钮；点「确认登出」后若直接 location.href = '/logout'，部分浏览器会中断 dialog.close() 导致视觉残留或焦点异常。
- 「确认登出」按钮应先调
dialog.close()，再用setTimeout延迟跳转（哪怕只延 10ms） - 「继续登录」按钮建议用
form[method="dialog"]提交，避免整页刷新；后端返回成功后，再调dialog.close() - 别在
dialog外部用onclick绑定跳转——用户按回车提交表单时会漏掉关闭逻辑
Safari 和 Firefox 的 backdrop 行为不一致，怎么兼容？
Chrome/Edge 的 dialog::backdrop 可点击且 e.target === dialog 成立；Safari 15.4–16.3 有时 e.target 是 body，Firefox 则根本不渲染 backdrop 元素。
- 点击遮罩关闭的逻辑不能只依赖
e.target === dialog，要加 fallback：检查e.clientX和e.clientY是否落在dialog的getBoundingClientRect()区域外 - 给
dialog::backdrop加cursor: pointer，让 Safari 用户感知可点击 - Firefox 下建议降级为「全屏遮罩 + 手动插入 div」，或改用
show()配合自定义 CSS 遮罩层
真正难的不是弹出来，而是让用户清楚“现在正在登出流程中”，且所有退出路径（Esc、点遮罩、点按钮、关页面）都能被可靠捕获——dialog 的 close 和 cancel 事件必须同时监听，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
