UD5工具箱
术语表与概念解析
掌握以下术语和概念，将帮助你更好地理解和使用 dialog 元素构建对话框组件。
dialog 元素
dialog 是 HTML5 规范引入的语义化交互元素，用于创建对话框和模态框。dialog 元素支持两种打开方式：showModal()（模态）和 show()（非模态）。浏览器会自动处理模态遮罩层、焦点管理、ESC 键关闭等交互逻辑。dialog 元素内置 open 属性，当对话框打开时该属性会被自动添加。关闭对话框时调用 close() 方法，open 属性会被移除。dialog 元素是构建 Web 对话框的原生推荐方案。
showModal() 方法
showModal() 是 dialog 元素的方法，用于以模态方式打开对话框。调用该方法后，浏览器会：创建 backdrop 遮罩层覆盖页面其他内容；将对话框居中显示在视口中央；实施焦点陷阱，将 Tab 键的焦点限制在对话框内部；阻止用户与对话框外部的元素交互。showModal() 是最常用的对话框打开方式，适用于需要用户关注和响应的重要交互场景。
show() 方法
show() 是 dialog 元素的方法，用于以非模态方式打开对话框。调用该方法后，对话框以块级元素形式显示在文档流中，不创建 backdrop 遮罩层，不实施焦点陷阱。用户可以同时与对话框和页面其他部分的元素交互。show() 方法适用于需要用户同时参考对话框内容和页面内容的场景，如浮动帮助面板、实时预览窗口等。
close() 方法
close() 是 dialog 元素的方法，用于关闭已打开的对话框。调用 close() 方法后，浏览器会：移除对话框的 open 属性；隐藏对话框内容；移除 backdrop 遮罩层（如果是 showModal 打开的）；将焦点返回到打开对话框之前的元素。close() 方法可以接受一个可选的字符串参数，该参数的值会赋给 dialog 的 returnValue 属性，用于传递关闭原因或返回值。
模态（Modal）
模态是一种用户界面交互模式，当对话框以模态方式打开时，用户必须先处理对话框中的内容（关闭对话框或完成表单提交），然后才能继续与页面其他部分交互。模态对话框的特征包括：显示 backdrop 遮罩层；实施焦点陷阱（Tab 键在对话框内循环）；阻止页面滚动；ESC 键可关闭对话框。模态对话框适用于需要用户关注和响应的重要操作确认、数据输入等场景。
非模态（Non-modal）
非模态是一种用户界面交互模式，当对话框以非模态方式打开时，用户可以同时与对话框和页面其他部分的元素交互。非模态对话框的特征包括：不显示 backdrop 遮罩层；不实施焦点陷阱；不阻止页面滚动；用户可以自由切换焦点。非模态对话框适用于需要用户同时参考对话框内容和页面内容的场景，如浮动工具面板、实时预览窗口、浮动帮助信息等。
backdrop 遮罩层
backdrop 是模态对话框打开时显示在对话框和页面内容之间的半透明遮罩层。backdrop 的主要作用包括：视觉上将对话框与页面内容分隔开；阻止用户点击对话框外部的元素；提示用户当前处于模态交互状态。backdrop 由浏览器自动创建和管理，开发者可以通过 ::backdrop 伪元素选择器自定义其样式，包括背景颜色、透明度、模糊效果等。点击 backdrop 通常会关闭对话框，但此行为可以通过 JavaScript 禁用。
焦点陷阱（Focus Trap）
焦点陷阱是模态对话框的无障碍访问特性之一。当对话框以 showModal() 方式打开时，浏览器会将键盘焦点限制在对话框内部。用户按 Tab 键时，焦点只会在对话框内的可交互元素（如按钮、输入框、链接）之间循环移动，不会跳转到对话框外部的页面元素。焦点陷阱确保了模态对话框的交互完整性——用户不会意外地操作到对话框外部的元素。当对话框关闭时，焦点会自动返回到打开对话框之前的元素。
returnValue 属性
returnValue 是 dialog 元素的属性，用于存储对话框关闭时的返回值。当调用 dialog.close('confirm') 时，returnValue 属性会被设置为 'confirm'。开发者可以通过读取该属性的值来判断对话框的关闭原因或用户选择。returnValue 还可以通过 <button formmethod="dialog" value="cancel"> 按钮的 value 属性自动设置。这是一个简单的值传递机制，避免了使用全局变量或事件参数。
cancel 事件
cancel 事件是 dialog 元素在用户尝试通过 ESC 键关闭对话框时触发的事件。该事件在对话框实际关闭之前触发，开发者可以通过调用 event.preventDefault() 阻止对话框的关闭。cancel 事件的典型应用场景包括：在关闭前显示确认提示、验证表单数据是否已保存、阻止包含未保存更改的对话框被关闭。cancel 事件只在 showModal() 打开的对话框中触发，show() 打开的对话框不触发此事件。
close 事件
close 事件是 dialog 元素在对话框关闭时触发的事件。该事件在对话框完成关闭操作后触发（open 属性已被移除，对话框内容已隐藏）。开发者可以通过监听 close 事件执行清理工作，如重置表单数据、恢复页面滚动状态、更新其他 UI 组件等。close 事件在 showModal() 和 show() 两种打开方式下都会触发。与 cancel 事件不同，close 事件无法阻止对话框的关闭，因为事件触发时关闭操作已完成。
formmethod="dialog"
formmethod="dialog" 是 button 元素的属性，用于设置表单按钮的提交方法。当 button 元素设置了此属性后，点击该按钮会以 dialog 方式关闭对话框，而不是以传统的 HTTP 请求方式提交表单。这会触发 dialog 的 close 事件，并将 button 的 value 属性值赋给 dialog 的 returnValue。formmethod="dialog" 是关闭包含表单的对话框的推荐方式，它既关闭了对话框，又避免了不必要的页面跳转或数据提交。
::backdrop 伪元素
::backdrop 是 dialog 元素的 CSS 伪元素，用于选择和样式化模态对话框的 backdrop 遮罩层。开发者可以通过该伪元素自定义 backdrop 的视觉外观，包括背景颜色（background-color）、透明度（opacity）、模糊效果（backdrop-filter: blur）等。::backdrop 伪元素只对以 showModal() 方式打开的对话框有效，show() 方式打开的对话框不创建 backdrop。通过 ::backdrop 伪元素，开发者可以实现与对话框内容独立的遮罩层样式。