PoP提示
用于将Bootstrap弹出窗口(如iOS中发现的)添加到网站上任何元素的文档和示例。更新于: 2023-04-30 14:28:21 查看: 482
发布于: 2021-9-6 16:18 发布者: 大米
概述
使用popover插件时要了解的事项:
- 由于性能原因,弹出窗口是可选的,因此您必须自己对其进行初始化。
- 零长度
title
和content
值将永远不会显示弹出框。 - 指定
container: 'body'
以避免在更复杂的组件(例如我们的输入组,按钮组等)中呈现问题。 - 在隐藏元素上触发弹出窗口将不起作用。
-
.disabled
或disabled
元素的弹出窗口必须在wrapper元素上触发。 - 从跨越多行的锚点触发时,弹出窗口将在锚点的整体宽度之间居中。 在您的
<a>
上使用.text-nowrap
可以避免这种情况。 - 弹出窗口必须先隐藏,然后才能从DOM中删除其相应元素。
- 阴影DOM中的一个元素可以触发弹出窗口。
启用弹出窗口
初始化页面上所有弹出窗口的一种方法是通过它们的data-bs-toggle
属性选择它们:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
使用容器选项
当你在父元素上有一些样式干扰了弹出窗口时,你需要指定一个自定义container
,这样弹出窗口的HTML就会出现在该元素中。
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), { container: 'body' })
示例
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
四个方向
共有四个选项:顶部,右侧,底部和左侧对齐。 在RTL中使用Bootstrap时,会镜像方向。
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
自定义弹出框
data-bs-custom-class="custom-popover"
来限定我们的自定义外观并使用它来覆盖一些本地 CSS 变量。.custom-popover {
--bs-popover-max-width: 200px;
--bs-popover-border-color: var(--bs-primary);
--bs-popover-header-bg: var(--bs-primary);
--bs-popover-header-color: var(--bs-white);
--bs-popover-body-padding-x: 1rem;
--bs-popover-body-padding-y: .5rem;
}
<button type="button" class="btn btn-secondary"
data-bs-toggle="popover" data-bs-placement="right"
data-bs-custom-class="custom-popover"
title="Custom popover"
data-bs-content="This popover is themed via CSS variables.">
Custom popover
</button>
关闭提示
使用 focus
触发器可消除用户下次单击与切换元素不同的元素的弹出窗口。
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
禁用提示。
disabled
属性的元素不是交互式的,这意味着用户无法悬停或单击它们来触发弹出窗口(或工具提示)。 解决方法是,您要从包装 <div>
或 <span>
触发弹出窗口理想情况下使用tabindex="0"
,并覆盖禁用元素上的 pointer-events
。
对于禁用的弹出式触发器,您可能还希望使用 data-bs-trigger="hover focus"
,这样弹出式窗口会立即显示给用户,因为他们可能不希望单击禁用的元素。
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
用法
通过JavaScript启用弹出窗口:
var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)
选项
可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到 data-bs-
,如 data-bs-animation=""
。
sanitize
, sanitizeFn
, 和 allowList
选项。
名字 | 类型 | 默认 | 描述 |
---|---|---|---|
animation |
boolean | true |
将CSS淡入淡出过渡应用于弹出框 |
container |
string | element | false | false |
将弹出框附加到特定元素。 示例: |
content |
string | element | function | '' |
如果不存在
如果给出了一个函数,则将 |
delay |
number | object | 0 |
延迟显示和隐藏弹出窗口(ms)-不适用于手动触发类型 如果提供了编号,则延迟会同时应用于隐藏/显示
对象结构是: |
html |
boolean | false |
将HTML插入弹出窗口。 如果为false,则将使用 innerText 属性将内容插入DOM。 如果您担心XSS攻击,请使用文本。 |
placement |
string | function | 'right' |
如何放置弹出框-- auto | top | bottom | left | right。
当使用函数确定放置位置时,将以popover DOM节点作为第一个参数,并以触发元素DOM节点作为第二个参数来调用它。 |
selector |
string | false | false |
如果提供了选择器,则将弹出对象委托给指定的目标。 实际上,这用于使动态HTML内容能够添加弹出窗口。 请参阅 this和 一个信息示例。 |
template |
string |
'<div class="popover" role="tooltip"><div class="popover-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的 offsets文档。 |
fallbackPlacement |
string | array | 'flip' |
允许指定Popper在回退时将使用的位置。 有关更多信息,请参阅Popper的 behavior 文档 |
boundary |
string | element | 'scrollParent' |
弹出框的溢出约束边界。 接受 'viewport' , 'window' , 'scrollParent'
或HTMLElement引用的值(仅JavaScript)。 有关更多信息,请参阅Popper的
preventOverflow
文档。 |
customClass |
string | function | '' |
在弹出窗口上添加类。 请注意,除了模板中指定的任何类之外,还将添加这些类。 要添加多个类,请用空格分隔它们: 您还可以传递一个函数,该函数应返回包含其他类名的单个字符串。 |
sanitize |
boolean | true |
启用或禁用清理。 如果激活了 'template' ,则 'content' 和 'title' 选项将被清除。 |
allowList |
object | Default value | 包含允许的属性和标签的对象 |
sanitizeFn |
null | function | null |
在这里您可以提供自己的清理功能。 如果您更喜欢使用专用库来执行清理操作,这将很有用。 |
popperConfig |
null | object | null |
要更改Bootstrap的默认Popper配置,请参阅 Popper的配置 |
单个弹出窗口的数据属性
如上所述,可以单独使用数据属性指定各个弹出框的选项。
方法
展示
显示元素的弹出框。 在实际显示弹出窗口之前(即在 shown.bs.popover
事件发生之前)返回到调用者 。 这被认为是弹出窗口的“手动”触发。 标题和内容均为零长度的弹出窗口永远不会显示。
myPopover.show()
隐藏
隐藏元素的弹出框。在弹出窗口实际被隐藏之前(即在 hidden.bs.popover
事件发生之前)返回到调用者 。 这被认为是弹出窗口的“手动”触发。
myPopover.hide()
切换
切换元素的弹出框。在弹出窗口实际显示或隐藏之前(即在 shown.bs.popover
或 hidden.bs.popover
事件发生之前)返回到调用者 。 这被认为是弹出窗口的“手动”触发。
myPopover.toggle()
处置
隐藏和销毁元素的弹出框(删除DOM元素上存储的数据)。 使用委派的弹出窗口(使用 selector 选项创建 )不能在后代触发器元素上单独销毁。
myPopover.dispose()
启用
使元素的弹出框能够显示。默认情况下启用弹出窗口 。
myPopover.enable()
禁用
删除显示元素弹出框的功能。 仅当重新启用弹出窗口时,才能显示该弹出窗口。
myPopover.disable()
切换器
切换显示或隐藏元素的弹出框的功能。
myPopover.toggleEnabled()
更新
更新元素弹出框的位置。
myPopover.update()
获取实例
允许您获取与DOM元素关联的popover实例的静态方法
var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
事件
事件类型 | 描述 |
---|---|
show.bs.popover | 调用 show 实例方法时,将立即触发此事件。 |
shown.bs.popover | 当弹出窗口对用户可见时将触发此事件(将等待CSS转换完成)。 |
hide.bs.popover | 调用 hide 实例方法后,立即触发此事件。 |
hidden.bs.popover | 当向用户隐藏弹出窗口时将触发此事件(将等待CSS转换完成)。 |
inserted.bs.popover | 当将弹出框模板添加到DOM时,在 show.bs.popover 事件之后触发此事件。 |
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})