我们承诺每个页面最多显示一个小型广告。别担心，隐藏此消息将确保您不会再次被骚扰。
头部
内容
模态框 #1
我们还有更多内容要与您分享。请继续关注模态框 2。
模态框 #2
就这样了！
存档旧消息
您的收件箱快满了，您是否希望我们启用旧消息的自动存档功能？
删除您的帐户
您确定要删除您的帐户吗？
删除您的帐户
删除您的帐户
您确定要删除您的帐户吗？
删除您的帐户
您确定要删除您的帐户吗？
更新您的设置
给我们您的反馈
更改您的内容
您是否要将该内容更改为其他内容？
个人资料图片
模态框头部
这是一个扩展内容的示例，它将导致模态框的调光器滚动。
个人资料图片
模态框头部
这是一个扩展内容的示例，它将导致模态框的调光器滚动。
类型
模态框
标准模态框
$('.ui.modal') .modal('show') ;
基本
模态框可以降低其复杂性
$('.ui.basic.modal') .modal('show') ;
存档旧消息
您的收件箱快满了，您是否希望我们启用旧消息的自动存档功能？
内容
头部
模态框可以有头部
头部
内容
模态框可以包含内容
头部
图片内容 2.0 版新增内容
模态框可以包含图片内容
头部
操作
模态框可以包含一行操作
头部
变体
全屏
模态框可以使用屏幕的全部尺寸
$('.fullscreen.modal') .modal('show') ;
尺寸
模态框的尺寸可以不同
$('.mini.modal') .modal('show') ;
$('.tiny.modal') .modal('show') ;
$('.small.modal') .modal('show') ;
$('.large.modal') .modal('show') ;
滚动内容2.2.11 版新增内容
模态框可以使用屏幕的全部尺寸
头部
这里有很长的内容
$('.ui.longer.modal') .modal('show') ;
状态
活动
活动模态框在页面上可见
示例
禁用垂直居中2.3 版新增内容
当您的模态框具有动态内容或多个步骤时，禁用居中可能会很有意义，这样内容的高度发生变化时就不会在垂直方向上跳动。
$('.special.modal') .modal({ centered: false }) .modal('show') ;
滚动模态框
当您的模态框内容超过浏览器的高度时，可滚动区域将自动扩展以包含足够的滚动空间，而不会滚动页面下方。
$('.long.modal') .modal('show') ;
内部滚动内容
您可能更喜欢让模态框的内容本身滚动，您可以使用 scrolling content 变体来实现此目的。
$('.longer.modal') .modal('show') ;
多个模态框
模态框可以打开第二个模态框。如果您使用 allowMultiple: true 参数，则第二个模态框将在第一个模态框之上打开。否则，将在打开第二个模态框之前关闭模态框。
// 初始化所有模态框 $('.coupled.modal') .modal({ allowMultiple: true }) ; // 在第一个模态框按钮上打开第二个模态框 $('.second.modal') .modal('attach events', '.first.modal .button') ; // 立即显示第一个模态框 $('.first.modal') .modal('show') ;
$('.coupled.modal') .modal({ allowMultiple: false }) ; // 将事件附加到按钮 $('.second.modal') .modal('attach events', '.first.modal .button') ; // 现在显示第一个模态框 $('.first.modal') .modal('show') ;
强制选择
您可以禁用模态框的调光器通过点击关闭，以强制用户做出选择
$('.basic.test.modal') .modal('setting', 'closable', false) .modal('show') ;
批准/拒绝回调
模态框会自动将批准/拒绝回调绑定到任何 positive/approve、negative/deny 或 ok/cancel 按钮。
$('.ui.basic.test.modal') .modal({ closable : false, onDeny : function(){ window.alert('等等，还没好！'); return false; }, onApprove : function() { window.alert('已批准！'); } }) .modal('show') ;
附加事件
模态框可以将事件附加到另一个元素
$('.test.modal') .modal('attach events', '.test.button', 'show') ;
过渡
模态框可以使用任何命名的 UI 过渡。
选择过渡
$('.selection.dropdown') .dropdown({ onChange: function(value) { $('.test.modal') .modal('setting', 'transition', value) .modal('show') ; } }) ;
调光器变体
模态框可以指定其他变体，如 blurring 或 inverted，这些变体会调整调光器的显示方式。
$('.ui.modal') .modal({ inverted: true }) .modal('show') ;
$('.ui.modal') .modal({ blurring: true }) .modal('show') ;
使用
初始化模态框
模态框可以包含在页面上的任何位置。初始化时，会缓存模态框的当前大小，并将元素从 DOM 中分离并移至调光器内。
$('.ui.modal') .modal() ;
模态框标题
图片可以出现在左侧或图标
描述可以出现在右侧
行为
所有以下行为都可以使用以下语法调用
$('.ui.modal') .modal('behavior name', argumentOne, argumentTwo) ;
| 行为 | 描述 |
|---|---|
| 显示 | 显示模态框 |
| 隐藏 | 隐藏模态框 |
| 切换 | 切换模态框 |
| 刷新 | 刷新模态框在页面上的居中位置 |
| 显示遮罩 | 显示关联的页面遮罩 |
| 隐藏遮罩 | 隐藏关联的页面遮罩 |
| 隐藏其他 | 隐藏遮罩中所有未选中的模态框 |
| 隐藏所有 | 隐藏同一遮罩下所有可见的模态框 |
| 缓存尺寸 | 缓存当前模态框尺寸 |
| 可以容纳 | 返回模态框是否可以容纳在页面上 |
| 处于活动状态 | 返回模态框是否处于活动状态 |
| 设置为活动 | 将模态框设置为活动状态 |
设置
模态框设置模态框设置修改模态框的行为
| 设置 | 默认 | 描述 |
|---|---|---|
| 可分离 | 真 | 如果设置为 false，将阻止模态框移动到遮罩内部 |
| 使用 Flex | '自动' | 自动将在支持绝对定位元素的 flex 容器的浏览器中自动使用 flex。设置为 true/false 将强制此设置适用于所有浏览器。 |
| 自动获取焦点 | 真 | 如果为真，则模态框内的第一个表单输入将在显示时获取焦点。设置为 false 以阻止此行为。 |
| 观察变化 | 假 | modal DOM 中的任何更改是否应该自动刷新缓存的位置 |
| 允许多个 | 假 | 如果设置为 true，则在打开新的模态框时不会关闭其他可见的模态框 |
| 键盘快捷键 | 真 | 是否自动绑定键盘快捷键 |
| 偏移 | 0 | 垂直偏移量，允许模态框之外的内容（例如关闭按钮）居中。 |
| 上下文 | 主体 | 选择器或 jQuery 对象，指定要变暗的区域 |
| 可关闭 | 真 | 设置为 false 将不允许您通过单击遮罩来关闭模态框 |
| 遮罩设置 |
{ closable : false, useCSS : true }
|
您可以指定自定义设置来扩展 UI 遮罩 |
| 过渡 | 缩放 | 在动画菜单进出时使用的命名过渡，完整列表可以在 ui 过渡 文档中找到。 |
| 持续时间 | 400 | 动画的持续时间 |
| 队列 | 假 | 是否应该排队额外的动画 |
回调回调指定在特定行为之后执行的函数。
| 设置 | 上下文 | 描述 |
|---|---|---|
| onShow | 模态框 | 当模态框开始显示时调用。 |
| onVisible | 模态框 | 模态框完成显示动画后调用。 |
| onHide($element) | 模态框 | 模态框开始隐藏后调用。如果函数返回 false，则模态框不会隐藏。 |
| onHidden | 模态框 | 模态框完成隐藏动画后调用。 |
| onApprove($element) | 点击 | 在按下肯定、批准或确定按钮后调用。如果函数返回 false，则模态框不会隐藏。 |
| onDeny($element) | 模态框 | 在按下否定、拒绝或取消按钮后调用。如果函数返回 false，则模态框不会隐藏。 |
DOM 设置DOM 设置指定此模块应如何与 DOM 交互
| 设置 | 默认 | 描述 |
|---|---|---|
| 命名空间 | 模态框 | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| 选择器 |
selector : { close : '.close, .actions .button', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel' },
|
|
| 类名 |
className : { active : 'active', scrolling : 'scrolling' }
|
|
调试设置调试设置控制调试输出到控制台
| 设置 | 默认 | 描述 |
|---|---|---|
| 名称 | 模态框 | 调试日志中使用的名称 |
| 调试 | 假 | 向控制台提供标准调试输出 |
| 性能 | 真 | 向控制台提供标准调试输出 |
| 详细 | 真 | 向控制台提供辅助调试输出 |
| 错误 |
error : { method : 'The method you called is not defined.' }
|
|