弹窗关闭按钮需确保事件绑定正确、焦点管理完整、可访问性属性闭环。常见问题包括DOM未加载导致获取元素失败、动态插入按钮未用事件委托、CSS遮挡点击、缺少type="button"和aria-label、未恢复焦点及清理副作用。
弹窗关闭按钮不是“加个×就行”，容错率低的按钮会直接卡住键盘/屏幕阅读器用户，甚至让整个弹窗逻辑失效。
为什么点击 X 按钮没反应？先查这三处
不是代码写错了，而是事件根本没绑上或没执行。最常断在这三个位置：
-
document.getElementById("modal")返回null：ID 拼错、大小写不对、或 JS 执行太早（DOM 还没加载完） - 按钮是
div里动态插入的，但事件监听写在静态绑定里，没用事件委托 - CSS 遮挡：
z-index太低，或父容器设了overflow: hidden，导致点击穿透失败
快速验证：在按钮 onclick 里加一句 alert("clicked")，点一下看有没有弹窗。没反应？说明事件根本没注册上。
原生 <dialog> 不自带关闭按钮，只提供语义容器和 .close() 方法。标准写法是：
立即学习“前端免费学习笔记（深入）”；
<dialog id="myDialog">
<button type="button" onclick="this.closest('dialog').close()" aria-label="关闭">×</button>
<p>这是弹窗内容</p>
</dialog>
关键点：
-
type="button"必须写，否则在表单内会被当成 submit 按钮，意外提交 -
this.closest('dialog')比硬写document.getElementById("myDialog").close()更健壮，避免 ID 冲突或命名变更 -
aria-label="关闭"不可省，否则屏幕阅读器读不出功能，违反 WCAG
自定义 div 弹窗的关闭逻辑不能复用
写了 onclick="modal.close()" 但 modal 是 <div> 元素？控制台立刻报错：modal.close is not a function。因为 close() 是 <dialog> 原生方法，对普通元素无效。
正确做法是手动切换状态：
- 用
classList.toggle("hidden")控制 CSS 类（推荐） - 或直接操作
style.display = "none"，但要注意 inline-style 优先级高，可能覆盖 CSS - 关闭后必须把焦点还给触发按钮：
triggerBtn.focus()，否则键盘用户卡在空白处
别忘了同时清理副作用：移除 body 的 overflow: hidden、清除定时器、重置表单字段。
ESC 键关闭必须配合焦点管理，否则键盘用户进不去也出不来
原生 alert()、confirm() 完全不响应 ESC —— 它们不是 DOM 元素，JS 执行期间浏览器不派发任何事件。真要支持 ESC，只有两种可靠路径：
- 用
<dialog>+.showModal()（注意：只用.show()不生效） - 手写
<div class="modal">时，监听keydown并加守卫：if (e.key === 'Escape' && isModalOpen) { closeModal(); }
但容易被忽略的是：弹窗容器必须有 tabindex="-1"，且打开后立即调用 dialogEl.focus()，否则 Tab 键根本进不到弹窗里，ESC 自然也没意义。
容错率真正的瓶颈不在样式，而在事件绑定时机、焦点链完整性和可访问性属性是否闭环。一个没设 aria-label 的 X 按钮，对屏幕阅读器用户等于不存在；一个没恢复焦点的关闭逻辑，会让键盘用户永远困在页面顶部。
