Bootstrap弹出框

在 Bootstrap 中，弹出框是一种常见的交互式组件，风格类似iOS，可加在网页上的任何元素上，用于在用户点击按钮或链接时显示一段额外的信息、确认消息或者用户输入表单。本教程将向大家展示Bootstrap弹出提示框相关示例。

一、popover插件

使用popover插件时需要注意的事项：

• Popovers依靠第三方库Popper进行定位。必须在bootstrap.js之前包含popper.min.js，或者使用bootstrap.bundle.min.js/bootstrap.bundle.js，其中包含popper，这样popover才能工作！
• Popovers需要工具提示插件作为依赖项；
• 由于性能原因，popover是选择加入的，所以必须自己初始化它们；
• 长度为零的标题和内容值永远不会显示popover；
• 指定container:’body’以避免在更复杂的组件（如输入组、按钮组等）中呈现问题；
• 触发隐藏元素上的弹出窗口将不起作用；
• 必须在包装器元素上触发.disabled或disabled元素的弹出窗口；
• 当从环绕多行的锚点触发时，弹出窗口将在锚点的总宽度之间居中。在a上使用.text-nowrap可避免此行为；
• 必须先隐藏popover，然后才能从DOM中删除相应的元素；
• 由阴影DOM中的元素，可以触发弹出窗口。

注意：

• 默认情况下，此组件使用内置的内容清理器，该清理器将删除任何不明确允许的HTML元素；
• 此组件的动画效果取决于“首选简化运动媒体”查询。

二、启用弹出窗口

初始化页面上所有popover的一种方法是通过其data-bs-toggle属性选择它们：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})

三、使用容器选项

当父元素上的某些样式干扰popover时，需要指定一个自定义容器，以便popover的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>

1、四个方向

我们的选择是可用的：顶部，右侧，底部，左对齐。在RTL中使用引导时，方向是镜像的。

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
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="Right popover">
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="Bottom popover">
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="Left popover">
Popover on left
</button>

2、单击时关闭

在用户下一次单击不同于toggle元素的元素时，使用focus触发器取消弹出窗口。

下一次单击时解除所需的特定标记：要实现正确的跨浏览器和跨平台行为，必须使用a标记，而不是button标记，并且还必须包含tabindex属性。

<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'
})

3、禁用的元素

具有disabled属性的元素不是交互式的，所以用户不能悬停或单击它们来触发popover（或工具提示）。作为一种解决方法，需要从包装器div或span触发popover，最好使用tabindex=“0”使键盘可聚焦。

对于禁用的popover触发器，也可能更喜欢data-bs-trigger=”hover focus”，这样popover会显示为对用户的即时视觉反馈，因为用户可能不希望单击禁用的元素。

<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)

1、选项

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data-bs-，如data-bs-animation=“”中所示。在传递数据属性时，请确保将选项名称的case类型从camelCase更改为kebab-case。例如：不要使用数据data-bs-customClass=”beautifier”，而是使用数据data-bs-custom-class=”beautifier”。

注意：基于安全性的原因，data属性不提供sanitize，sanitizeFn和allowList选项。

2、函数与popperConfig一起使用

var popover = new bootstrap.Popover(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})

六、方法

1、显示

显示元素的popover。在实际显示popover之前（即在show.bs.popover事件发生之前）返回调用方。这被认为是popover的“手动”触发。标题和内容均为零长度的弹出窗口永远不会显示。

myPopover.show()

2、隐藏

隐藏元素的弹出提示框。在弹出提示框实际被隐藏之前返回给调用者（也就是在hidden.bs.popover事件发生之前。）弹出提示框会被认为是“manual”触发。

myPopover.hide()

3、切换

切换元素的弹出提示框。在弹出提示框实际被显示或隐藏之前返回给调用者（也就是在shown.bs.popover或hidden.bs.popover事件发生之前。）弹出提示框会被认为是“manual”触发。

myPopover.toggle()

4、销毁

隐藏和销毁一个元素的弹出提示框（将移除在DOM元素上储存的数据。）被委派的弹出提示框（使用the selector option创建）不能在后代触发元素上单独销毁。

myPopover.dispose()

5、可用

使元素的弹出提示框能够显示。弹出提示框预设启用显示。

myPopover.enable()

6、禁用

取消显示元素的popover的功能。只有重新启用时才能显示popover。

myPopover.disable()

7、切换可用

切换显示或隐藏弹出提示框功能。

myPopover.toggleEnabled()

8、更新

更新弹出提示框的位置。

myPopover.update()

9、获取实例

允许取得DOM元素上弹出提示框实体的静态方法。

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

七、事件

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
// do something...
})