模态框相关术语
- 模态框（Modal）
- 一种覆盖在主页面内容之上的浮层组件，用于向用户展示重要信息或请求用户输入。模态框会暂时阻断用户与底层页面的交互，直到用户完成模态框内的操作或主动关闭模态框。"模态"一词来源于英文"Modal"，表示一种特定的交互模式。
- 非模态框（Modeless / Non-modal）
- 与模态框相对，非模态框不阻断用户与底层页面的交互，用户可以同时操作浮层和底层页面。例如页面右下角的客服聊天窗口就是典型的非模态框。
- 弹窗（Popup / Dialog）
- 模态框的通俗称呼，在日常开发和设计讨论中，"弹窗"和"模态框"通常指代同一类组件。在不同的框架和组件库中，可能使用不同的名称，如Dialog、Modal、Overlay等。
- 对话框（Dialog）
- 模态框的一种常见命名方式，特别强调模态框用于与用户进行"对话"交互的场景，如确认操作、填写表单等。在HTML5规范中，dialog元素就是用于表示对话框的语义化标签。
UI/UX设计术语
- 遮罩层（Overlay / Backdrop / Mask）
- 模态框背后的半透明覆盖层，用于遮挡底层页面内容，突出模态框的存在感。遮罩层通常使用深色半透明背景，用户点击遮罩层区域可以触发关闭模态框的操作。
- 主题色（Primary Color / Theme Color）
- 应用或组件的主要识别颜色，用于按钮、链接、标题栏等关键视觉元素。在模态框中，主题色通常应用于确认按钮、标题栏背景等区域，与品牌色保持一致。
- 圆角（Border Radius）
- CSS属性，用于定义元素四角的圆弧半径。圆角值越大，边角越圆润。圆角设计可以柔化视觉效果，使界面看起来更现代、友好。模态框的圆角和按钮的圆角是两个独立的可配置参数。
- 阴影（Box Shadow）
- CSS属性，用于在元素周围创建投影效果。阴影可以增强元素的层次感和立体感，使模态框看起来悬浮在页面之上。阴影的强度、模糊半径和偏移量都会影响最终的视觉效果。
- 视觉层次（Visual Hierarchy）
- 通过大小、颜色、对比度、位置等视觉元素引导用户注意力的设计原则。模态框通过遮罩层、阴影、动画等手段建立视觉层次，确保用户的注意力聚焦在弹窗内容上。
前端开发术语
- HTML片段（HTML Snippet / Fragment）
- 一段可嵌入到更大HTML文档中的HTML代码片段，通常不包含完整的HTML文档结构（如doctype、html、head、body标签）。模态框的HTML片段可以直接插入到现有页面的指定位置使用。
- 内联样式（Inline Style）
- 直接写在HTML元素style属性中的CSS样式。内联样式的优先级最高，但不利于代码维护和复用。模态框代码生成器输出完整HTML时，样式以内联方式嵌入，确保代码可独立运行。
- 响应式设计（Responsive Design）
- 一种网页设计方法，使页面能够在不同尺寸的设备上自动调整布局，提供最佳的浏览体验。模态框的全屏尺寸（95vw）使用了视口宽度单位，确保在不同屏幕尺寸下都能正确显示。
- 视口（Viewport）
- 用户在设备屏幕上看到的网页内容区域。vw（viewport width）是CSS中的视口宽度单位，1vw等于视口宽度的1%。95vw表示占据视口宽度的95%。
- 无障碍访问（Accessibility / A11y）
- 确保网站和应用能够被所有人使用，包括有视觉、听觉、运动或认知障碍的用户。模态框的ESC键关闭功能是无障碍访问的重要实现之一，键盘用户可以通过ESC键关闭弹窗。
- 事件监听（Event Listener）
- JavaScript中用于响应用户操作或浏览器事件的函数。模态框的交互行为（点击关闭按钮、点击遮罩、按ESC键）都通过事件监听器实现。
动画相关术语
- CSS过渡（Transition）
- CSS属性值在一定时间内平滑变化的动画效果。模态框的淡入、滑入等动画效果可以通过CSS transition属性实现，无需JavaScript参与。
- CSS动画（Animation）
- 比transition更强大的CSS动画能力，支持关键帧（@keyframes）定义，可以创建复杂的多步骤动画。模态框的缩放弹出效果可以通过CSS animation实现。
- 淡入效果（Fade In）
- 元素从完全透明逐渐变为完全可见的动画效果，是最常用和最温和的过渡动画之一。淡入效果通常与opacity属性的变化配合使用。
- 缓动函数（Easing Function）
- 控制动画速度变化曲线的函数。常用的缓动函数包括ease（默认）、linear（线性）、ease-in（加速）、ease-out（减速）和ease-in-out（先加速后减速），不同的缓动函数会影响动画的自然感。
🔧 相关工具
UD5工具箱