HTML dialog 对话框元素

HTML dialog元素：原生模态对话框、showModal()方法、::backdrop伪元素自定义遮罩、form method=dialog自动关闭、与JavaScript配合、无障碍ARIA角色 · 难度：入门 · +10XP

HTML dialog 元素 —— 不用JS也能做弹窗

做网页时经常需要弹出一个对话框——确认删除、登录框、提示信息……以前必须用 JavaScript 来显示和隐藏。现在 HTML5 提供了一个新标签 <dialog>，原生就支持弹窗！

基本用法

<dialog id="myDialog">
  <h2>提示</h2>
  <p>你确定要删除这条记录吗？</p>
  <button onclick="document.getElementById('myDialog').close()">取消</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">打开对话框</button>

showModal() vs show()

方法	效果
showModal()	模态弹窗：背景不可点击、自动出现遮罩、ESC键自动关闭、焦点锁定在对话框内
show()	非模态弹窗：背景仍可操作、无遮罩、ESC不会关闭

绝大多数情况用 showModal()，因为模态弹窗更符合用户预期。

自定义背景遮罩样式

用 CSS 的 ::backdrop 伪元素美化遮罩：

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

表单 + dialog = 完美配合

如果在 dialog 里放一个 <form method="dialog">，提交表单后弹窗会自动关闭！

<dialog id="loginDialog">
  <form method="dialog">
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</dialog>

动手练习

1. 基础练习：创建一个模态 dialog，包含确定和取消两个按钮，点击取消关闭弹窗，点击确定弹出 alert。
2. 进阶应用：给 dialog 添加 ::backdrop 样式，做出毛玻璃效果的遮罩。再加一个简单的CSS动画，让弹窗打开时有渐入效果。
3. 项目实战：做一个用户协议弹窗——第一次打开网页时自动弹出，用户必须点击同意才能看到页面内容。

接下来学什么？

下一课学习 datalist 自动补全——给输入框添加下拉建议列表，用户输入时自动匹配。