HTML5弹窗实现与dialog标签使用教程

要保证跨浏览器视觉一致，得自己补 CSS：

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  animation: fade-in 0.2s;
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

注意：::backdrop 伪元素只对 showModal() 生效；show() 不触发 backdrop。

关闭逻辑必须监听 close 事件，不能只靠

用户可能通过 Esc 键、点击 backdrop（如果支持）、或调用 dialog.close() 关闭。只绑 DOM 点击事件会漏掉前两种情况。

正确做法是统一监听 close 事件：

const dialog = document.querySelector('dialog');
dialog.addEventListener('close', () => {
  console.log('关闭原因：', dialog.returnValue); // 'cancel' / 'confirm' / ''
});
// 打开时可设 returnValue，比如：
document.getElementById('confirm-btn').onclick = () => dialog.close('confirm');

容易踩的坑：dialog.returnValue 在未显式调用 close('xxx') 时为 ''（空字符串），不是 undefined；用 == null 判断会误判。

表单提交 inside

会默认关闭，但需防重复提交

如果