HTML5dialog弹窗使用教程详解

为什么

加了 open 属性还是不模态？

这是最常踩的坑：open 是一个布尔属性，它只控制元素是否“可见”，但不触发模态逻辑。浏览器不会自动加 backdrop、不会禁用底层内容、也不会绑定 Esc 键事件。

• ✅ 正确做法：用 JavaScript 调用 dialog.showModal()
• ❌ 错误写法：
  ...
  （只是普通浮动层）
• ⚠️ 注意：showModal() 会自动将焦点移入 dialog 内第一个可聚焦元素，若没有，需手动 focus()

如何用 showModal() 和 close() 控制弹窗生命周期？

所有交互控制必须走 JS 方法，HTML 属性仅用于初始状态或样式辅助。关闭时调用 close()，不是设置 open=false —— 后者无效且可能破坏内部状态。

• dialog.showModal()：显示模态框，启用 backdrop，捕获焦点，监听 Esc
• dialog.close()：隐藏并重置内部状态；可传参作为返回值，如 dialog.close('confirm')
• dialog.returnValue：读取关闭时传入的值（仅在 close() 调用后有效）
• 监听关闭事件：dialog.addEventListener('close', () => {...})，注意不是 click 或 blur

const dialog = document.querySelector('dialog');
document.getElementById('openBtn').addEventListener('click', () => {
  dialog.showModal();
});
dialog.addEventListener('close', () => {
  console.log('用户操作结果：', dialog.returnValue); // 'cancel' 或 'confirm'
});

怎么让

在 Safari 和旧版 Chrome 中可用？