我们保证每个页面最多显示一个小型广告。别担心，隐藏此消息将确保您不会再收到烦人的提示。
类型
Javascript
弹出窗口
元素可以指定要显示的弹出窗口内容。
有标题
元素可以指定具有标题的弹出窗口内容。
HTML
元素可以指定弹出窗口的 HTML。
我的邻居龙猫
为了离住院的母亲更近，两姐妹和父亲搬到了乡下，发现周围的树木住着神奇的精灵。
预先存在
元素可以显示一个已包含在页面中的弹出窗口。
守望者
在一个灰暗的另类 1985 年，政府的严厉打击结束了戴面具的义警的辉煌时代，但在一位蒙面老兵被残忍谋杀后，对凶手的调查开始了。
用户评分
无 Javascript
工具提示2.2 版新增功能
元素可以指定一个简单的工具提示，该工具提示可以在没有 javascript 的情况下显示。
变体
基本
弹出窗口可以提供更基本的形式。
宽度
弹出窗口可以更宽，以容纳更长的内容。
流畅
流畅的弹出窗口将占据其偏移容器的整个宽度。
1
2
3
4
大小
弹出窗口的大小可以不同。
流动
弹出窗口可以没有最大宽度，并继续流动以适应其内容。
基本计划
2 个项目，每月 10 美元
商业计划
5 个项目，每月 20 美元
高级计划
8 个项目，每月 25 美元
反转
弹出窗口的颜色可以反转。
用法
初始化弹出窗口
弹出窗口在激活元素上初始化。
$('.activating.element') .popup() ;
使用预先存在的弹出窗口
使用预先存在的弹出窗口允许您在弹出窗口中包含复杂的 HTML。
如果您在页面加载时将弹出窗口作为激活元素的相邻同级元素包含进来，它可以自动找到。
要指示弹出窗口在内联中查找您的弹出窗口元素，您可以使用 inline 参数对其进行初始化。
$('.button') .popup({ inline: true }) ;
自定义标题
在任何地方使用预先存在的弹出窗口
如果您无法将弹出窗口元素作为同级元素包含进来，您可以指定一个自定义选择器来检索您的弹出窗口。
$('.button') .popup({ popup: '.special.popup' }) ;
在元数据中指定内容
标题、内容、HTML 或偏移量或变体等常用设置可以包含在 HTML 元数据中。
在 Javascript 中指定内容
$('.ui.popup') .popup({ title : 'Popup Title', content : 'Hello I am a popup' }) ;
行为
所有以下行为都可以使用以下语法调用。
$('.your.element') .popup('behavior name', argumentOne, argumentTwo) ;
| 行为 | 描述 |
|---|---|
| show | 显示弹出窗口 |
| hide | 隐藏弹出窗口 |
| hide all | 隐藏页面上所有可见的弹出窗口 |
| get popup | 返回当前弹出窗口的 DOM 元素 |
| change content(html) | 更改当前弹出窗口的内容 |
| toggle | 切换弹出窗口的可见性 |
| is visible | 返回弹出窗口是否可见 |
| is hidden | 返回弹出窗口是否隐藏 |
| exists | 返回弹出窗口是否已创建并插入页面 |
| reposition | 调整弹出窗口的大小（仅对居中的弹出窗口必要） |
| set position(position) | 重新定位弹出窗口 |
| destroy | 从页面中删除弹出窗口并删除所有事件 |
| remove popup | 从页面中删除弹出窗口 |
示例
指定弹出窗口边界2.2 版新增功能
弹出窗口现在包含一个新的设置 boundary，它允许您指定弹出窗口不应超出另一个部分的边界。这在复杂的窗格布局中很有用。
此外，弹出窗口现在可以指定一个滚动上下文，以允许除了窗口之外的滚动容器导致点击的弹出窗口在滚动时隐藏。
$('.boundary.example .button') .popup({ boundary: '.boundary.example .segment' }) ;
通常，此弹出窗口将在默认位置 顶部居中 打开，但由于这将超出段落的边界，因此它将搜索其他可用位置，直到找到一个可以在段落内部放置弹出窗口的位置。
宽弹出窗口菜单
显示复杂内容（如宽弹出窗口菜单）的更简单方法是将弹出窗口内容作为页面 HTML 的预先存在的部分。
使用 inline: true 设置将让 Semantic 知道在激活器之后显示下一个同级 ui popup 元素。
调整显示和隐藏的延迟等设置，并使菜单可悬停，将有助于它更像一个下拉菜单。
$('.example .menu .browse') .popup({ inline : true, hoverable : true, position : 'bottom left', delay: { show: 300, hide: 800 } }) ;
为弹出窗口指定选择器
如果无法将弹出窗口内容作为下一个同级元素包含进来，您还可以指定一个自定义选择器来帮助将弹出窗口内容链接到其激活器。
$('.example .custom.button') .popup({ popup : $('.custom.popup'), on : 'click' }) ;
我与按钮不在同一级别，但仍然可以找到我。
指定触发事件
可以指定弹出窗口触发事件
$('.example .teal.button') .popup({ on: 'click' }) ; $('.example input') .popup({ on: 'focus' }) ;
目标元素
弹出窗口可以指定一个与自身不同的目标元素来显示弹出窗口
$('.test.button') .popup({ position : 'right center', target : '.test.image', title : '我最喜欢的狗', content : '我最喜欢的狗会像自己一样喜欢其他狗' }) ;
内联或相对于页面
弹出窗口可以被直接插入元素之后，也可以被添加为页面body的子元素。
/* 这只会为内联为真的弹出窗口设置样式 */ .example .popup { color: #FF0000; }
$('.inline.icon') .popup({ inline: true }) ;
定位
弹出窗口可以被定位到元素的任何一边。如果空间不足，它会自动寻找一个类似的备用位置来使用。
指定偏移量
可以使用data-offset="value"手动调整弹出窗口位置，指定偏移量属性。
过渡
弹出窗口可以使用任何命名的 ui 过渡。
首页选择过渡
$('.selection') .dropdown({ onChange: function(value) { $('.demo.icon') .popup({ transition: value }) .popup('toggle') ; } }) ;
弹出窗口设置用于配置弹出窗口行为的设置
| 设置 | 默认值 | 描述 |
|---|---|---|
| popup | false | 可以指定一个应该用作弹出窗口的 DOM 元素。这对包含预格式化的弹出窗口很有用。 |
| exclusive | false | 当此弹出窗口打开时，是否应隐藏所有其他弹出窗口。 |
| movePopup | true | 当popup已存在于页面上时，是否将弹出窗口移动到与目标元素相同的偏移容器。在没有overflow:visible的元素内部使用弹出窗口，比如侧边栏，可能需要你将它设置为false。 |
| observeChanges | true | 弹出窗口是否应该附加mutationObservers以在元素从页面的 DOM 中删除时自动运行destroy。 |
| boundary | window | 当弹出窗口超过此元素的边界时，它会尝试寻找另一个显示位置。 |
| context | body | 指定应在其中创建弹出窗口的选择器或 jquery 对象。 |
| scrollContext | window | 会在此上下文中自动在滚动事件中隐藏弹出窗口。 |
| jitter | 2 | 弹出窗口允许出现在其上下文边界之外的像素数。当元素位于其context的边缘时，这允许容许舍入误差。 |
| position | top left | 弹出窗口应该出现的方位。 |
| inline | false | 如果弹出窗口是内联的，它将被创建在当前元素旁边，允许局部 css 规则应用。在隐藏后它不会从 DOM 中删除。否则，弹出窗口将被附加到 body 并将在隐藏后被删除。 |
| preserve | false | 弹出窗口的内容在隐藏后是否应该保留在页面中，使其在后续加载时更快地重新出现。 |
| prefer | adjacent | 可以设置为adjacent或opposite，如果弹出窗口无法适应屏幕，则优先考虑相邻或相反位置。 |
| lastResort | false | 当设置为false时，如果弹出窗口无法完全适应页面，则不会出现并产生错误消息。将其设置为一个位置，例如right center，强制弹出窗口将此位置作为最后的手段，即使它部分在舞台之外。将其设置为true将使用最后尝试的位置。 |
| on | hover | 用于触发弹出窗口的事件。可以是focus、click、hover或manual。手动弹出窗口必须使用$('.element').popup('show');触发。 |
| delay |
delay: { show: 50, hide: 0 }
|
在悬停或聚焦时显示或隐藏弹出窗口之前的延迟（以毫秒为单位）。 |
| transition | slide down | 在动画菜单进出时使用的命名过渡。 |
| duration | 200 | 动画事件的持续时间。 |
| arrowPixelsFromEdge 2.3 中的新功能。 |
20 | 当目标元素小于此数量的 2 倍时，弹出窗口将显示箭头居中在目标元素上，而不是弹出窗口边缘与目标边缘对齐。 |
| setFluidWidth | true | 弹出窗口是否应该在加载时设置流体弹出窗口变体宽度，以避免width: 100%包含填充。 |
| hoverable | false | 弹出窗口是否不应该在悬停时关闭（对弹出窗口导航菜单很有用）。 |
| closable | true | 当使用on: 'click'时，指定单击页面是否应该关闭弹出窗口。 |
| addTouchEvents | true | 当使用on: 'hover'时，是否应该添加touchstart事件以允许触发弹出窗口。 |
| hideOnScroll | auto | 弹出窗口是否应该在滚动或触摸移动时隐藏，auto仅对没有on: 'click'的弹出窗口隐藏。将其设置为 false以防止移动浏览器在您点击输入字段内部时关闭弹出窗口。 |
| target | false | 如果指定了选择器或 jQuery 对象，这允许弹出窗口相对于该元素进行定位。 |
| distanceAway | 0 | 弹出窗口距离元素的偏移量。 |
| offset | 0 | 从计算位置偏移的像素。 |
| maxSearchDepth | 10 | 当弹出窗口无法适应屏幕时，在放弃搜索弹出窗口位置之前迭代的次数。 |
回调
回调指定在特定行为之后发生的函数。
| 参数 | 上下文 | 描述 | |
|---|---|---|---|
| onCreate | $module | $popup | 在弹出窗口元素创建时的回调，带创建的弹出窗口。 |
| onRemove | $module | $popup | 弹出窗口从 DOM 中删除之前的回调。 |
| onShow | $module | $popup | 显示弹出窗口之前的回调。从该回调返回false将取消弹出窗口显示。 |
| onVisible | $module | $popup | 显示弹出窗口后的回调。 |
| onHide | $module | $popup | 隐藏弹出窗口之前的回调。从该回调返回false将取消弹出窗口隐藏。 |
| onHidden | $module | $popup | 隐藏弹出窗口后的回调。 |
| onUnplaceable | $module | $popup | 弹出窗口无法放置在屏幕上的回调。 |
内容设置用于指定弹出窗口内容的设置
| 设置 | 描述 |
|---|---|
| variation | 要使用的弹出窗口变体，可以使用带有空格分隔符的多个变体。 |
| content | 要显示的内容 |
| title | 与内容一起显示的标题。 |
| html | 要显示的 HTML 内容，而不是预格式化的标题和内容。 |
DOM 设置DOM 设置指定此模块应如何与 DOM 交互。
| 设置 | 默认值 | 描述 |
|---|---|---|
| namespace | popup | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| selector |
selector : { popup : '.ui.popup' }
|
内部使用的 DOM 选择器。 |
| metadata |
metadata: { content : 'content', html : 'html', offset : 'offset', position : 'position', title : 'title', variation : 'variation' }
|
用于存储数据的 HTML 数据属性。 |
| className |
className : { loading : 'loading', popup : 'ui popup', position : 'top left center bottom right', visible : 'visible' }
|
用于将样式附加到状态的类名。 |
调试设置调试设置控制对控制台的调试输出。
| 设置 | 默认值 | 描述 |
|---|---|---|
| name | 弹出窗口 | 调试日志中使用的名称。 |
| silent | false | 使所有控制台输出静音，包括错误消息，无论其他调试设置如何。 |
| debug | false | 向控制台提供标准调试输出。 |
| performance | true | 向控制台提供标准调试输出。 |
| verbose | true | 向控制台提供辅助调试输出。 |
| errors |
error: { invalidPosition : '您指定的方位无效', cannotPlace : '弹出窗口不适合视窗边界', method : '您调用的方法未定义。', noTransition : '此模块需要 ui 过渡'
|
|