菜单

模态框
模态框用来显示内容,并且可以暂时性的阻止与网站主页面的互动。

下载

类型

模态框 (Modal)

标准模态框

$('.ui.modal') .modal('show') ;

基本的 (Basic)

模态框可以降低自身的复杂性

$('.ui.basic.modal') .modal('show') ;

内容

标题

模态框可以有标题

内容

模态框可以有内容

图片内容 (Image Content) 2.0新特性

模态框可以包含图片内容

2.0中必须使用image content才能在模态框中显示图片。

行为 (Actions)

模态可以包含一行动作

关闭操作默认应用于所有按钮,另外 onApprove 或者 onDeny 的这两个回调函数,将在元素匹配到选择器时触发。

approve : '.positive, .approve, .ok', deny : '.negative, .deny, .cancel'

你可以在回调函数中 return false; 来阻止模态框关闭的行为。

变形

全屏 (Full Screen)

一个模态框可以占居整个屏幕

$('.fullscreen.modal') .modal('show') ;

尺寸 (Size)

模态框可以改变大小

$('.small.modal') .modal('show') ;
$('.large.modal') .modal('show') ;

状态

激活 (Active)

一个激活的模态框在页面上是可见的

例子

滚动模态框 (Scrolling Modal)

当模态框内容超出浏览器的高度时可滚动区会自动扩展到包含足够的空间用于滚动,不用滚动页面.

$('.long.modal') .modal('show') ;

多个模态框 (Multiple Modals)

模态框可以打开第二个模态框. 如果使用allowMultiple: true 参数,第二个模态框将在第一个模态框的顶部打开,否则第一个模态框会在第二个打开之前关闭.

// initialize all modals $('.coupled.modal') .modal({ allowMultiple: true }) ; // open second modal on first modal buttons $('.second.modal') .modal('attach events', '.first.modal .button') ; // show first immediately $('.first.modal') .modal('show') ;
$('.coupled.modal') .modal({ allowMultiple: false }) ; // attach events to buttons $('.second.modal') .modal('attach events', '.first.modal .button') ; // show first now $('.first.modal') .modal('show') ;

必须选择 (Forcing a Choice)

你可以禁止模态框关闭来迫使用户做一个选择

$('.basic.test.modal') .modal('setting', 'closable', false) .modal('show') ;

同意/拒绝函数 (Approve / Deny Callbacks)

模态框在 同意/拒绝、正面/负面 的按钮上自动带有 ‘同意’ ‘拒绝’ 回调函数。

如果 onDeny, onApprove 或者 onHide 函数返回 false,那么将阻止模态框关闭。
$('.ui.basic.test.modal') .modal({ closable : false, onDeny : function(){ window.alert('Wait not yet!'); return false; }, onApprove : function() { window.alert('Approved!'); } }) .modal('show') ;

附加事件 (Attach events)

一个模态框可以(作为一个事件)附加到另一个元素

$('.test.modal') .modal('attach events', '.test.button', 'show') ;
Launch modal

过渡 (Transitions)

模态框可以用任何命名的ui过渡

$('.selection.dropdown') .dropdown({ onChange: function(value) { $('.test.modal') .modal('setting', 'transition', value) .modal('show') ; } }) ;

遮罩层变化 (Dimmer Variations)

模态框可以指定额外的变化,比如 模糊 或者 反色

全屏模糊的模态框在集成显卡的宽屏上性能不好。
$('.ui.modal') .modal({ inverted: true }) .modal('show') ;
$('.ui.modal') .modal({ blurring: true }) .modal('show') ;

使用

初始化

模态框可以包括在页面的任何地方。初始化时,模态框的当前大小将被缓存,元素将从DOM中分离,并在一个调光器中移动。

为什么移动模态内容?

在页面遮罩层的模态框允许三维动画,此外,遮罩层的内容可以被模糊或改变而不影响模态的内容。

如果你需要将你的模态框停留在当前位置,你可以设置 detachable: false 来保存位置。

$('.ui.modal') .modal() ;

行为

所有的行为可以被以下语法调用:

$('.ui.modal') .modal('behavior name', argumentOne, argumentTwo) ;
行为 描述
show 弹出模态框
hide 隐藏模态框
toggle 切换模态框
refresh 刷新页面中间的模态框
show dimmer 显示相关页面的遮罩层
hide dimmer 隐藏相关页面的遮罩层
hide others 隐藏所有未被选择的模态框
hide all 隐藏所有可见模态框
cache sizes 缓存当前模态框尺寸
can fit 判断页面是否能容得下模态框
is active 判断当前模态框是否被激活
set active 设置模态框激活

设置

模态框设置
模态框设置修改模态框行为

设置 默认 描述
detachable true 如果设置为false将阻止模态框移动到遮罩层的内部
autofocus true 当设置为true的时候,表单的第一个输入框在显示的时候将聚焦,设置为false就不会这样。
observeChanges false 是否 模态框 DOM 的变化会自动带来缓存的更新。
allowMultiple false 如果设置为true在打开一个新的模态框时不会关闭其他可见的模态框.
keyboardShortcuts true 是否绑定键盘快捷键
offset 0 垂直偏移以允许内容超出模态框,例如关闭按钮会被居中.
context body 选择器或者jquery对象指定某一区域变暗
closable true S设置为false不允许通过点击遮罩层来关闭模态框
dimmerSettings
{ closable : false, useCSS : true }
你可以自定设置来扩展 UI dimmer
transition scale 当动画菜单弹出或者关闭的时候使用命名的过渡. Fade不需要包含ui transitions就可以使用
duration 400 动画持续时间
queue false 附加动画是否需要排队

回到函数
回调函数指定一个函数在特定行为之后执行。

设置 语境 描述
onShow Modal 当模态框开始显示的时候被调用
onVisible Modal 当模态框结束显示动画的时候被调用
onHide($element) Modal 在模态开始隐藏后调用。如果函数返回false,模态将不会隐藏。
onHidden Modal 当模态框结束隐藏动画的时候被调用
onApprove($element) Click 当一个积极(positive)的,赞成(approve)的或者确定(OK)按钮被按下时调用。如果函数返回 false,模态框将不会隐藏。
onDeny($element) Modal 当一个消极(negative)的,反对(deny)的或者取消(cancel)按钮被按下时调用。如果函数返回 false,模态框将不会隐藏。

DOM 设置
DOM设置指定如何用DOM接口模块

设置 默认 描述
namespace modal 事件命名空间.确保模块不受其他元素影响。
selector
selector : { close : '.close, .actions .button', approve : '.actions .positive, .actions .approve, .actions .ok', deny : '.actions .negative, .actions .deny, .actions .cancel' },
className
className : { active : 'active', scrolling : 'scrolling' }

调试设置
调试设置控制调试输出到控制台

设置 默认 描述
name Modal 调试日志使用的名称
debug False 提供标准调试输出到控制台
performance True 提供标准调试输出到控制台
verbose True 提供辅助调试输出到控制台
error
error : { method : 'The method you called is not defined.'' }