Menu

modal
模态显示的内容会暂时阻止与站点主视图的交互

下载

types

modal

一个标准的模态

$('.ui.模态”) .模态(显示) ;

basic

模态可以减少它的复杂性

$('.ui.basic.模态”) .模态(显示) ;

内容

Header

模态可以有一个标题

内容

模态可以包含内容

图像Content 新2.0

模态可以包含图像Content

带有图像Content的情态动词必须使用 图像Content2.0. 这是为了确保flex-box规则不会影响常规内容.

Actions

一个模态可以包含一行操作

默认情况下,关闭操作应用于所有按钮操作,除此之外 on批准 or ondeny 如果元素匹配任何一个选择器,回调函数将被触发.

批准:.积极的, .批准, .ok', 否认:“.负的, .deny, .取消的

为了防止一个模态动作导致模态关闭,你可以这样做 返回错误; 从回调.

变化

全屏

模态可以使用屏幕的整个大小

$('.全屏.模态”) .模态(显示) ;

size

模态的大小可以不同

$('.mini.模态”) .模态(显示) ;
$('.tiny.模态”) .模态(显示) ;
$('.small.模态”) .模态(显示) ;
$('.large.模态”) .模态(显示) ;

滚动Content
新2.2.11

模态可以使用屏幕的整个大小

$('.ui.长.模态”) .模态(显示) ;

活跃的

在页面上可以看到一个活动模式

例子

禁用垂直定心
新2.3

当你的模态有动态内容时, 或多个步骤, 禁用居中是有意义的,这样当内容的高度改变时,它就不会垂直地跳跃.

$('.特殊的.模态”) .模态({ 集中:假 }) .模态(显示) ;

滚动模态

当你的模态内容超过浏览器的高度时,可滚动区域将自动扩展以包含足够的滚动空间, 不需要滚动下面的页面.

$('.long.模态”) .模态(显示) ;

内部滚动Content

您可能更希望拥有模态滚动条本身的内容,您可以使用 滚动Content 变异.

$('.长.模态”) .模态(显示) ;

多个情态动词

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

//初始化所有情态动词 $('.耦合.模态”) .模态({ allowMultiple:真 }) ; //在第一个模式按钮上打开第二个模式 $('.第二个.模态”) .模态(“附加事件”、“.first.modal .按钮”) ; //显示第一个立即 $('.first.模态”) .模态(显示) ;
$('.耦合.模态”) .模态({ allowMultiple:假 }) ; //附加事件到按钮 $('.第二个.模态”) .模态(“附加事件”、“.first.modal .按钮”) ; //现在先显示 $('.first.模态”) .模态(显示) ;

迫使一个选择

您可以通过单击禁用模态的调光器,以强制用户做出选择

$('.basic.test.模态”) .模态(“设置”,“可闭”,假) .模态(显示) ;

批准/拒绝回调

情态动词将自动将批准拒绝回调绑定到任何积极/批准, 否定/拒绝或确定/取消按钮.

If ondeny, on批准 or onHide 返回false,它将阻止模式关闭
$('.ui.basic.test.模态”) .模态({ 可闭:假的, ondeny:函数(){ 窗口.警报(“等待还没有!'); 返回错误; }, on批准: function() { 窗口.警报(“批准!'); } }) .模态(显示) ;

附加事件

模态可以将事件附加到另一个元素

$('.test.模态”) .模态(“附加事件”、“.test.按钮,显示) ;
发射模态

转换

模态可以使用任何命名的ui转换.

$('.选择.下拉) .下拉({ onChange:功能(价值){ $('.test.模态”) .模态(“设置”、“过渡”,值) .模态(显示) ; } }) ;

调光器的变化

情态动词可以指定额外的变化,比如 模糊 or 哪一个调整如何调光器显示.

全屏模糊模式在集成图形的宽屏分辨率的当前计算机中不具有性能.
$('.ui.模态”) .模态({ 反向:真 }) .模态(显示) ;
$('.ui.模态”) .模态({ 模糊:真 }) .模态(显示) ;

usage

初始化一个模态

模态可以包含在页面的任何位置. 在初始化时,模态的当前大小将被缓存, 元素将从DOM中分离出来并移动到调光器中.

为什么要移动模态内容?

在页面调光器中有一个模态允许3D动画,而不需要3D透视图设置改变页面的其余内容. 另外, 可以模糊或更改调光器外的内容,而不影响模态的内容.

如果你需要让你的模态保持在它当前的位置,你可以使用设置保持它的位置 可拆式:假

$('.ui.模态”) .模态() ;

行为

下面的所有行为都可以使用该语法调用:

$('.ui.模态”) .modal('行为名称',argumentOne, argumentTwo) ;
行为 描述
show 显示了模态
hide 隐藏了模态
toggle 切换模式
刷新 刷新页面上的模态中心
显示调光器 显示相关的页调光器
隐藏的调光器 隐藏相关的页调光器
藏人 在调光器中隐藏所有未选中的模态
隐藏所有 在同一个调光器中隐藏所有可见的模态
缓存大小 缓存当前模式大小
可以容纳 返回模态是否适合该页面
是活跃的 返回模态是否活动
设置活动 将模态设置为活动

设置

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

设置 默认的 描述
可拆式 true 如果设置为false将阻止模态被移动到调光器内部
useFlex “汽车” Auto将在支持在伸缩容器内绝对定位元素的浏览器中自动使用flex. 设置为true/false将强制所有浏览器进行此设置.
自动对焦 true 当为true时,模态内的第一个表单输入将在显示时接收焦点. 将其设置为false以防止这种行为.
observeChanges false 是否有任何变化 modal DOM应该自动刷新缓存位置
allowMultiple false 如果设置为true,在打开一个新的模态时不会关闭其他可见模态
用户 true 是否自动绑定键盘快捷键
抵消 0 允许模态之外的内容(例如关闭按钮)居中的垂直偏移量.
上下文 body 指定要调暗的区域的选择器或jquery对象
可闭 true 设置为false将不允许您通过单击调光器来关闭模式
dimmer设置
{ 可闭:假的, useCSS:真 }
您可以指定要扩展的自定义设置 UI调光器
过渡 scale 命名过渡使用时,动画菜单在和在,complete列表可以找到 ui的转换 docs.
持续时间 400 动画时间
queue false 额外的动画是否应该排队

回调
回调函数指定在特定行为之后发生的函数.

设置 上下文 描述
昂秀 modal 当一个模态开始显示时调用.
onVisible modal 在一个模态完成显示动画后被调用.
onHide(元素) modal 在模态开始隐藏后调用. 如果函数返回 false,模态不会隐藏.
onHidden modal 在模态完成隐藏动画后调用.
on批准(元素) click 按下一个确定、批准或ok按钮后叫什么. 如果函数返回 false,模态不会隐藏.
ondeny(元素) modal 在按下否定、拒绝或取消按钮后调用. 如果函数返回 false 模态不会隐藏.

DOM的设置
DOM设置指定该模块应该如何与DOM接口

设置 默认的 描述
名称空间 modal 事件名称空间. 确保模块拆卸不会影响附加到元素的其他事件.
选择器
选择器:{ 关闭:.接近, .Actions .按钮”, 批准:.Actions .积极的, .Actions .批准, .Actions .ok', 否认:“.Actions .负的, .Actions .deny, .Actions .取消的 },
类名称
名称:{ 积极:“活跃”, 滚动:“滚动” }

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

设置 默认的 描述
name modal 调试日志的名称
debug進 false 提供标准的调试输出到控制台
性能 true 提供标准的调试输出到控制台
详细的 true 提供辅助调试输出到控制台
error
错误:{ 方法:'你调用的方法没有定义.' }

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9