模态框关闭按钮应写为<button type="button" class="modal-close" aria-label="Close modal">×</button>，必须含type="button"和aria-label，关闭逻辑用事件委托绑定到document，点击或ESC时调用统一closeModals()函数并彻底remove()模态框。
模态框关闭按钮的 HTML 结构怎么写？
直接写 × 或 Close 文本按钮最稳妥，别用空 <button></button> —— 某些屏幕阅读器会读作“button”，语义不清。推荐带 aria-label 的明确写法：
<button type="button" class="modal-close" aria-label="Close modal">×</button>
注意：必须加 type="button"，否则在 <form> 里点它会触发表单提交；aria-label 不可省，否则残障用户无法感知功能。
用事件委托绑定关闭逻辑，为什么不能直接 on click？
因为模态框常动态插入（比如 document.body.appendChild(modal)），直接对 .modal-close 调用 addEventListener 会失效——节点还没存在时就绑了，或者多次弹窗导致重复绑定。
事件委托是唯一可靠方案：监听父容器（通常是 document 或固定容器节点），用 event.target.matches('.modal-close') 判断是否点击了关闭按钮。
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('click', function (e) {
if (e.target.matches('.modal-close')) {
e.target.closest('.modal').remove();
}
});关键点：
-
e.target是实际点击的元素，不是父级 -
.closest('.modal')向上找最近的模态框容器，比硬写parentNode.parentNode更健壮 - 不要用
querySelector查找整个 DOM，性能差且可能选错实例
移除模态框时，为什么不能只 hide 或 display: none？
隐藏不等于销毁。残留的 DOM 节点会：
- 占用内存，尤其频繁打开/关闭时
- 仍响应键盘事件（如
Tab键聚焦到隐藏按钮） - 若含
<video>、<iframe>或定时器，可能继续运行、消耗资源
正确做法是调用 .remove()（现代浏览器）或 .parentNode.removeChild(node)（兼容 IE11）。如果需要保留状态（比如表单输入），再额外做数据缓存，但 DOM 本身该删就删。
注意：移除前务必清理副作用：
-
clearTimeout/clearInterval -
removeEventListener（如果模态框内手动绑过） - 解绑
keydown监听（如 ESC 关闭逻辑）
ESC 键关闭和 backdrop 点击关闭怎么统一处理？
别为每个交互写独立逻辑。把“关闭动作”抽成函数，所有触发源都调它：
function closeModals() {
document.querySelectorAll('.modal').forEach(modal => {
modal.remove();
});
}
<p>document.addEventListener('click', e => {
if (e.target.matches('.modal-close') || e.target.matches('.modal-backdrop')) {
closeModals();
}
});</p><p>document.addEventListener('keydown', e => {
if (e.key === 'Escape') closeModals();
});容易漏的点：
-
.modal-backdrop点击区域要铺满 viewport，且z-index高于内容但低于模态框主体 - 多个模态框同时存在时，
closeModals()清掉全部，避免残留；若需只关顶层，改用document.querySelector('.modal:last-of-type') -
Escape事件必须监听document，而不是模态框自身——焦点可能不在模态框内
真实场景里，最常被忽略的是 backdrop 点击区域没设 cursor: pointer，用户以为点不动；还有 event.stopPropagation() 加错位置，导致点击内部按钮也触发 backdrop 关闭。
