HTML 原生模态最佳实践

HTML原生模态实现（不使用UI库）：dialog元素+showModal自动管理焦点和aria-modal、ESC关闭/lock background scroll/ inert属性配合、与React Portal/Vue Teleport模态对比 · 难度：入门 · +10XP

HTML 原生模态弹窗最佳实践

前面学了dialog和inert，现在把它们组合起来做一个完整的、无障碍友好的模态弹窗。

完整模板

<dialog id="modal" aria-labelledby="modalTitle">
  <h2 id="modalTitle">确认操作</h2>
  <p>你确定要执行此操作吗？</p>
  <form method="dialog">
    <button type="submit" value="cancel">取消</button>
    <button type="submit" value="confirm">确定</button>
  </form>
</dialog>
<script>
modal.showModal();
main.setAttribute('inert', '');
modal.addEventListener('close', () => {
  main.removeAttribute('inert');
  if (modal.returnValue === 'confirm') { /* 执行操作 */ }
});
modal.addEventListener('click', (e) => {
  if (e.target === modal) modal.close(); // 点击遮罩关闭
});
</script>

模态弹窗设计清单

动手练习

1. 基础练习：复制模板做删除确认弹窗。
2. 进阶应用：做登录弹窗——弹窗内表单，提交后处理登录，显示欢迎XXX。
3. 项目实战：把项目中所有alert/confirm/prompt替换成dialog模态弹窗。