UD5工具箱
专业术语表
以下是与 HTML Dialog 和模态框相关的专业术语解释。
HTML5 引入的原生对话框元素，用于创建模态或非模态的对话框。dialog 元素提供了语义化的 HTML 结构，浏览器原生支持焦点管理、Escape 键关闭和 ::backdrop 伪元素。通过 showModal() 方法可以以模态方式打开对话框，通过 show() 方法可以以非模态方式打开。
dialog 元素的模态打开方法。调用 showModal() 会以模态方式显示对话框，同时创建 ::backdrop 伪元素作为遮罩层，并锁定页面滚动。模态对话框会捕获焦点，用户必须先关闭对话框才能与页面其他内容交互。这种方法确保了对话框的无障碍访问特性。
当使用 showModal() 打开 dialog 元素时，浏览器会自动创建 ::backdrop 伪元素作为遮罩层。这个伪元素位于对话框下方、页面内容上方，通常设置为半透明黑色背景，用于遮挡页面其他内容并突出显示对话框。通过 CSS 可以自定义 ::backdrop 的样式，如背景颜色、透明度和动画效果。
模态是一种用户界面交互模式，要求用户必须先处理当前对话框才能返回主界面。模态对话框会阻止用户与页面其他内容交互，直到对话框被关闭。这种模式常用于重要确认、错误提示、表单输入等场景。模态对话框通常带有遮罩层，视觉上将对话框与页面内容分隔开。
焦点锁定是一种无障碍访问技术，确保键盘用户的焦点被限制在对话框内部。当模态对话框打开时，Tab 键应该只在对话框内的可交互元素之间切换，不会移动到对话框外的页面内容。原生 dialog 元素的 showModal() 方法自动实现了焦点锁定功能，无需额外的 JavaScript 代码。
Web Accessibility Initiative - Accessible Rich Internet Applications，是一组增强网页无障碍访问特性的 HTML 属性。对于模态对话框，常用的 ARIA 属性包括 aria-modal="true" 表示这是模态对话框，aria-labelledby 指向对话框标题元素，aria-describedby 指向对话框描述内容。这些属性帮助屏幕阅读器正确识别和播报对话框内容。
CSS 过渡是一种动画技术，允许 CSS 属性值在指定时间内平滑过渡。通过设置 transition 属性，可以定义哪些属性参与过渡、过渡持续时间和缓动函数。在模态框动画中，常用过渡效果包括 opacity（透明度）、transform（变换）和 visibility（可见性）。过渡动画比关键帧动画更轻量，适合简单的状态切换效果。
响应式设计是一种网页设计方法，使页面能够在不同设备和屏幕尺寸上都能良好显示。对于模态框，响应式设计意味着在小屏幕设备上模态框应该占据更多空间，在大屏幕设备上可以限制最大宽度。使用 CSS 媒体查询和相对单位（如 vw、vh、%）可以实现模态框的响应式布局。