必须调用showModal()才能激活真模态行为，仅设open属性或调用show()无效；点击外部关闭需手动监听click事件并严格判断e.target === dialog，Safari旧版需坐标fallback。

dialog 点击外部不关闭？先确认它是不是真模态

绝大多数“点击外部不关闭”问题，根源是 dialog 没激活模态行为——它只是个普通隐藏元素。必须调用 showModal()，不能只靠 open 属性或 show()。

常见翻车点：

• <dialog open></dialog> 渲染出来但没 backdrop、Esc 无效、焦点不锁 → 这是假模态，open 只控制显隐，不触发模态逻辑
• 用 dialog.show() 替代 showModal() → 同样无遮罩、无焦点捕获、外部点击自然不生效
• dialog 嵌套在 <div id="app"> 或 Vue/React 根容器里 → Safari 和部分 Chrome 版本会直接禁用模态特性 <p>正确初始化只有一条路：<code>const modal = document.querySelector('dialog'); modal.showModal();

  监听 close 事件却拿不到关闭原因？检查 close() 的调用方式

  dialog.returnValue 不是自动填的，它完全取决于你调用 close() 时传了什么参数。点遮罩、按 Esc、点 × 按钮，三者行为不同，但都只触发同一个 close 事件。

  立即学习“前端免费学习笔记（深入）”；

  区分来源的关键操作：

  • 确认按钮必须写 modal.close('confirm')，取消按钮写 modal.close('cancel')
  • 遮罩或 Esc 关闭时，modal.returnValue 是空字符串 ""，不是 "cancel"
  • 别在 close 事件里读 event.returnValue —— 它不存在；要读 modal.returnValue
  • 如果没手动调 close()，而是靠用户点 backdrop 关闭，那 returnValue 就一定是 ""

  示例监听逻辑：

  

  Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

  实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

  下载

  modal.addEventListener('close', () => {
    if (modal.returnValue === 'confirm') {
      submitForm();
    } else if (modal.returnValue === '') {
      console.log('用户点了遮罩或按了 Esc');
    }
  });

  点击外部关闭失效？别用 e.target === backdrop 判断

  ::backdrop 是伪元素，不是真实 DOM 节点，所以 e.target.classList.contains('backdrop') 或类似判断永远为 false。真正可靠的判断方式只有一个：看 e.target 是否等于 dialog 元素本身。

  错误写法（常见于复制粘贴）：

  dialog.addEventListener('click', () => dialog.close()); // 点里面任何按钮也关窗

  正确写法（严格限定目标）：

  dialog.addEventListener('click', (e) => {
    if (e.target === dialog) {
      dialog.close();
    }
  });

  注意兼容性坑：

  • Safari 15.4–16.3 中，点 backdrop 时 e.target 可能是 body，需 fallback 判断坐标：e.clientX
  • 不要给 dialog 外层再套可点击容器（如 <button><dialog>...</dialog></button>），否则冒泡会误触发打开逻辑

  想“强提醒”又不让关？别拦，用重显 + 视觉约束

  浏览器不允许真正阻止关闭（event.preventDefault() 在 close 事件里无效，还会破坏无障碍），所有“强制不可关”方案在 iOS 或新版 Chrome 都会静默失败。

  合规且可用的替代路径：

  • 在 close 事件里做业务校验，若不满足条件（如表单未保存），立刻调 modal.showModal() 重新弹出
  • 视觉上强化不可跳过感：遮罩背景设为 rgba(0,0,0,0.85)，内容区加阴影和边框，禁用页面滚动（document.body.style.overflow = 'hidden'）
  • 按钮文案明确，比如用“我已阅读并同意”，而不是模糊的“确定”
  • 移动端必须用 max-width: 90vw 和 margin: clamp(1rem, 5vh, 2rem) auto，防止小屏溢出导致遮罩点击区丢失

  最常被忽略的一点：重显后必须手动恢复焦点到弹窗内第一个可聚焦元素（如确认按钮），否则键盘用户会卡在页面底部，这是 WCAG 2.1 明确要求的焦点管理责任。