dialog 标签由 JS 方法和事件驱动，需监听 close 事件获取 returnValue，cancel 事件仅响应 Esc 或 type="cancel" 按钮；点 backdrop 关窗需手动判断 target 或坐标；showModal() 才启用 backdrop 和焦点锁定；form[method="dialog"] 可自动关闭并赋值 returnValue，但须用 type="submit" 按钮。
dialog 标签不是“写了就弹”，它的行为完全由 JS 方法和事件驱动；不监听 close 或 cancel，你就拿不到用户操作结果，也清不了状态。
dialog.close() 触发后，必须靠 close 事件拿 returnValue
用户点关闭按钮、按 Esc、或表单提交后自动关闭，最终都走 dialog.close()。但这个方法本身不带回调，也不阻塞执行——你不能在它后面直接读 dialog.returnValue，因为此时可能还没赋值。
- 必须监听
dialog.addEventListener('close', () => {...})，在这个回调里读dialog.returnValue -
cancel事件只在用户按 Esc 或点击<button type="cancel">时触发，和close是两个独立事件 - 如果用
form[method="dialog"]，returnValue会自动设为提交按钮的value；手动调用dialog.close('yes')时，returnValue就是'yes' - 别在
click事件里读returnValue，它还没被设置
点击 backdrop 关闭需手写逻辑，且 Safari 有坐标 fallback 需求
::backdrop 是伪元素，不冒泡、不可点击、不触发任何默认行为——浏览器不会帮你实现“点背景关窗”。你得自己监听 dialog 元素的 click，再判断是不是点在遮罩上。
- 标准写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 中
e.target常是body，需 fallback 判断坐标：const rect = dialog.getBoundingClientRect(); if (e.clientX rect.right || e.clientY rect.bottom) dialog.close(); - 绝对不要写
dialog.addEventListener('click', () => dialog.close())，这会让所有内部点击（比如按钮、输入框）都关窗 -
show()没有 backdrop，这段监听无效；只对showModal()生效
form[method="dialog"] 提交后不刷新，但需注意 enctype 和按钮 type
在 dialog 里放 form 是高频场景，但默认提交会整页 reload，看起来像弹窗“闪退”。
立即学习“前端免费学习笔记（深入）”；
- 加
method="dialog"是最简解：提交后自动dialog.close()，并把按钮value赋给dialog.returnValue - 按钮必须是
type="submit"，type="button"不触发表单提交逻辑 - 如果传 JSON，要显式设
enctype="application/json"，否则 FormData 在部分浏览器中会忽略JSON.stringify()的数据 - 异步提交（如 fetch）时，第一件事就是
e.preventDefault()，否则页面仍会刷新
dialog 不显示？先查 showModal() 调用时机和 DOM 挂载位置
写了 <dialog></dialog> 却看不到，90% 是没调 showModal()，或调得太早。
-
dialog默认display: none且不参与渲染，设open属性只让它可见，但无 backdrop、不锁焦点、不响应 Esc - JS 必须等 DOM 加载完成：脚本放
</body>前，或包在DOMContentLoaded里 -
dialog必须是body的直接子元素，嵌在div或section里会导致 Safari 渲染异常甚至不居中 - 别手动改
dialog.open = true或dialog.style.display = 'block'，这绕过原生焦点管理，Tab 键会穿透到背景页
真正麻烦的从来不是怎么打开，而是关窗后怎么拿值、怎么清状态、怎么兼容 Safari 的 target bug 和 transform 渲染失效——这些细节不处理，dialog 就只是个“看起来很美”的半成品。
