Bootstrap 弹出框的文件与实例,类似 iOS 上的风格,可加在网页上的任何元素上。
使用弹出框插件时应了解的事情如下:
bootstrap.bundle.min.js
/ bootstrap.bundle.js
,这已经包含 Popper.js 可以直接运作。title
和 content
值是不会显示一个弹出框。container: 'body'
以避免在更复杂的元件(如我们的 input 群组,按钮组等)中出现问题。.disabled
或 disabled
元素弹出框的触发必须在外层元素上。<a>
上使用 white-space: nowrap;
来避免这种行为。都明白了?太好了,让我们通过一些例子看他们是如何运作的。
在页面上初始化所有弹出框的一种方法是通过它们的 data-toggle
属性来选择它们:
$(function () {
$('[data-toggle="popover"]').popover()
})
container
选项当你在父元素上有一些干扰弹出框的样式时,你需要指定一个自定义的 container
容器,以便弹出框的 HTML 显示在该元素中。
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
有四种选择:顶部,右侧,底部和左侧对齐。
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
使用 focus
类以便用户进行下一次点击时移除这个弹出框。
为了正确的跨浏览器和跨平台,你必须使用<a>
标签,而不是 <button>
标签,你还必须包含一个 tabindex
属性。
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
具有 disabled
的元素是不能产生互动的,这意味用户不能使用 hover 及点击触发弹出(或工具提示),如果想要添加,你使用 <div>
或 <span>
包裹并覆盖 pointer-events
在禁用的属性上。
对于禁用的弹出框,你也许倾向使用 data-trigger="hover"
来直接为用户提供视觉回馈,因为用户不会去点击禁用的元素。
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
通过 JavaScript 添加弹出窗口:
$('#example').popover(options)
选项可以通过 data 属性或JavaScript传递。 对于 data 属性,请将选项名称附加到 data-
上,如 data-animation=""
。
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
animation | boolean | true | 将 CSS 渐变应用到弹出框 |
container | string | element | false | false |
将弹出框加到特定元素。例如: |
content | string | element | function | '' |
如果 如果给出一个函数,它将被调用,其 |
delay | number | object | 0 |
显示和隐藏弹出框的延迟(ms) - 不适用于手动触发类型 如果提供了一个数字,则将延迟应用于隐藏/显示 事件结构是: |
html | boolean | false |
将HTML插入到弹出框中。 如果是 false,那麽将使用 jQuery 的 text 方法将内容插入到 DOM 中。如果你担心 XSS 攻击,请使用文字。 |
placement | string | function | 'right' |
如何定位彈出提示框 - auto | top | bottom | left | right。 当函数用于确定位置时,将使用弹出框 DOM 节点作为其第一个参数并将触发元素 DOM 节点作为其第二个参数来调用。 |
selector | string | false | false | 如果提供了选择器,弹出框将被委派给指定的目标。实际上,这用于动态 HTML 来扩增弹出框。 请参阅 此 和 一个讯息实例。 |
template | string | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
创建动态提示框时使用的基本 HTML 动态提示框的 动态提示框的 最外层的包装元素应该有 |
title | string | element | function | '' |
如果 如果给出一个函数,它将被调用,其 |
trigger | string | 'click' | 如何触发动态提示框 - click | hover | focus | manual。 你可以传递多个触发器;将它们与空格分开。`manual` 不能与任何其他触发器组合。 |
offset | number | string | 0 | 动态提示框相对于其目标的偏移。更多信息,请参阅 Popper.js 的 偏移文档。 |
fallbackPlacement | string | array | 'flip' | 指定动态提示框将在调回时使用哪个位置。 有关更多信息,请参阅 Popper.js 的 行为文档 |
boundary | string | element | 'scrollParent' | Overflow constraint boundary of the popover. Accepts the values of 'viewport' , 'window' , 'scrollParent' , or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs. |
如上所述,可以通过使用data属性来替代指定各个弹出框的选项。
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
$().popover(options)
元素集合的弹出框初始化。
.popover('show')
显示一个元素的弹出框。 在弹出实际显示之前返回给调用者 (即,在shown.bs.popover
事件发生之前)。 这被认为是弹出框是 “手动” 触发。标题和内容均为零的弹出框从不显示。
$('#element').popover('show')
.popover('hide')
隐藏元素的弹出框。在弹出框实际被隐藏之前返回给调用者 (即,在 hidden.bs.popover
事件发生之前)。这被认为是弹出框的 “手动” 触发。
$('#element').popover('hide')
.popover('toggle')
切换元素的弹出框。 在popover实际显示或隐藏之前返回给调用者(即,在 shown.bs.popover
或 hidden.bs.popover
事件发生之前)。 这被认为是弹出框的 “手动” 触发。
$('#element').popover('toggle')
.popover('dispose')
隐藏和销毁一个元素的弹出框。使用委託(the selector
option) 创建)的弹出框不能在后代触发元素上被单独销毁。
$('#element').popover('dispose')
.popover('enable')
给一个元素的弹出框显示的功能。 弹出框是在预设情况下添加的。
$('#element').popover('enable')
.popover('disable')
删除要显示元素的弹出框的功能。只有在重新添加后,才能显示弹出框。
$('#element').popover('disable')
.popover('toggleEnabled')
切换弹出框的显示或隐藏元素功能。
$('#element').popover('toggleEnabled')
.popover('update')
更新弹出框的位置。
$('#element').popover('update')
事件类型 | 描述 |
---|---|
show.bs.popover |
当调用 show 实例方法时,此事件会立即触发。
|
shown.bs.popover | 当弹出框显示时,会触发此事件(待 CSS 转换完成)。 |
hide.bs.popover | 当调用 hide 实例方法时,会立即触发此事件。 |
hidden.bs.popover | 当弹出框隐藏后,会触发此事件(将等待CSS转换完成) |
inserted.bs.popover | 当将提示范本加到 DOM 时,此事件在 show.bs.popover 事件之后触发。 |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})