本文档描述了 Semantic UI 中的模态框（Modal）和遮罩（Dimmer）组件及其相互关系。模态框是出现在主内容上方的对话框窗口，而遮罩则在它们后面创建了一个变暗的覆盖层。两者结合起来，能够聚焦特定内容，并在用户关闭它们之前阻止与下方页面的交互。
本文档涵盖了这两个密切相关的组件的架构、功能、配置选项和交互模式。有关这些组件使用的过渡效果的信息，请参阅过渡组件。
Semantic UI 中的模态框和遮罩组件协同工作，但也可以独立运行。它们的架构遵循 Semantic UI 框架内的一致模式。
来源
当模态框显示时，它会创建或使用现有的遮罩，并与过渡组件协调动画序列。
来源
模态框组件（$.fn.modal()）提供了一个灵活的对话系统，能够将用户的注意力集中在特定内容上，同时阻止与页面其他元素的交互。
来源
| 设置 | 默认 | 描述 |
|---|---|---|
| transition | 'scale' | 显示/隐藏动画效果 |
| duration | 500 | 动画持续时间（毫秒） |
| dimmerSettings | {} | 传递给遮罩的设置 |
| closable | true | 点击遮罩是否关闭模态框 |
| autofocus | true | 显示时是否聚焦输入框 |
| keyboardShortcuts | true | 是否使用 Escape 键关闭模态框 |
| allowMultiple | false | 是否允许多个模态框同时显示 |
| detachable | true | 模态框是否应分离并移动到遮罩 |
| centered | true | 模态框是否居中显示 |
| blurring | false | 遮罩是否应模糊背景 |
| inverted | false | 遮罩是否应反转（例如，使用浅色背景） |
来源
| 方法 | 描述 |
|---|---|
| show() | 显示模态框 |
| hide() | 隐藏模态框 |
| toggle() | 切换模态框可见性 |
| refresh() | 刷新模态框尺寸计算 |
| showDimmer() | 显示遮罩 |
| hideDimmer() | 隐藏遮罩 |
| hideAll() | 隐藏所有可见的模态框 |
| hideOthers() | 隐藏其他可见的模态框 |
来源
| 回调 | 描述 |
|---|---|
| onShow | 模态框开始显示时调用 |
| onVisible | 模态框完全可见且动画完成时调用 |
| onHide | 模态框开始隐藏时调用 |
| onHidden | 模态框完全隐藏且动画完成时调用 |
| onApprove | 点击“批准”按钮时调用 |
| onDeny | 点击“拒绝”按钮时调用 |
来源
遮罩组件（$.fn.dimmer()）提供了一个变暗的覆盖层，可以集中注意力在特定元素上或创建视觉层次。
来源
| 设置 | 默认 | 描述 |
|---|---|---|
| opacity | 'auto' (0.85) | 遮罩的透明度 |
| variation | '' | 例如“inverted”或“aligned”等变体 |
| dimmerName | null | 命名遮罩，用于选择特定的遮罩 |
| closable | true | 点击遮罩是否将其隐藏 |
| useCSS | true | 是否使用 CSS 动画 |
| transition | 'fade' | 使用的过渡效果 |
| duration | { show: 500, hide: 500 } | 显示/隐藏动画的持续时间 |
| on | false | 触发遮罩显示的事件（'hover', 'click'） |
来源
| 方法 | 描述 |
|---|---|
| show(callback) | 显示遮罩 |
| hide(callback) | 隐藏遮罩 |
| toggle() | 切换遮罩可见性 |
| set.variation(variation) | 设置遮罩的变体 |
| set.active() | 设置遮罩为活动状态 |
| set.disabled() | 禁用遮罩 |
| set.enabled() | 启用遮罩 |
来源
模态框组件通过几个关键机制与遮罩组件集成：
dimmerSettings 将设置传递给遮罩。初始化时，如果不存在遮罩，模态框会创建一个。
来源
模态框在其生命周期中会经历各种状态：
| 状态管理 | 描述 |
|---|---|
| loading | 初始加载状态，执行尺寸计算 |
| active | 模态框可见 |
| animating | 模态框正在显示或隐藏过程中 |
| scrolling | 模态框内容可滚动（当高于视口时） |
| legacy | 使用旧版定位（兼容旧浏览器） |
| dimmed | 背景已变暗 |
来源
模态框会根据屏幕尺寸和内容自动调整其尺寸和位置。
模态框会根据内容高度相对于视口的高度，在滚动模式和适配模式之间自动切换。
来源
最佳性能的模态框使用建议
transition: falseallowMultiple: true 以防止冲突来源
模态框（Modal）和遮罩层（Dimmer）组件包含了对不支持CSS过渡效果浏览器的回退方案
来源