Bootstrap弹出框

2023-11-24 32

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

四、例子

Bootstrap弹出框

<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中使用引导时,方向是镜像的。

Bootstrap弹出框

<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属性。

Bootstrap弹出框

<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会显示为对用户的即时视觉反馈,因为用户可能不希望单击禁用的元素。

Bootstrap弹出框

<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选项。

Name Type Default Description
animation boolean TRUE 对popover应用CSS淡入淡出过渡
container string | element | false FALSE 将popover附加到特定元素。示例:container:’body’。此选项特别有用,因为它允许您将popover放在触发元素附近的文档流中,这将防止popover在调整窗口大小时从触发元素中浮动。
content string | element | function 如果数据内容属性不存在,则为默认内容值。

 

如果给定一个函数,它将被调用,其this引用设置为popover所附加到的元素。

delay number | object 0 延迟显示和隐藏popover(ms)-不适用于手动触发器类型

如果提供了数字,则对隐藏/显示都应用延迟

对象结构是:delay: { “show”: 500, “hide”: 100 }

html boolean FALSE 在popover中插入HTML。如果为false,innerText属性将用于将内容插入DOM。如果您担心XSS攻击,请使用文本。
placement string | function ‘right’ 如何定位popover-自动|顶部|底部|左侧|右侧?当指定auto时,它将动态地重新定向popover。

当一个函数用于确定位置时,调用它时,popover DOM节点是它的第一个参数,触发元素DOM节点是它的第二个参数。此上下文设置为popover实例。

selector string | false FALSE 如果提供了选择器,popover对象将被委托给指定的目标。实际上,这是用来使动态HTML内容添加popover的。
template string ‘<div class=”popover” role=”tooltip”><div class=”popover-arrow”></div><h3 class=”popover-header”></h3><div class=”popover-body”></div></div>’ 创建popover时要使用的基本HTML。

opover的标题将被注入到.popover头中。

弹出提示框的content将被注入到.popover-body中。

.popover-arrow 将成为弹出提示框的箭头。

最外层的元素必须有.popover这个class。

title string | element | function 如果标题属性不存在,则为默认标题值。

如果给定一个函数,它将被调用,其this引用设置为popover所附加到的元素。

trigger string ‘click’ 如何触发弹出窗口-单击|悬停|聚焦|手动。您可以传递多个触发器;用空格隔开。手动不能与任何其他触发器组合。
fallbackPlacements array [‘top’, ‘right’, ‘bottom’, ‘left’] 通过提供数组中的放置列表(按优先顺序)定义回退位置。有关更多信息,请参阅波普尔的行为文档
boundary string | element ‘clippingParents’ opover的溢出约束边界。默认情况下,它是’clippingParents’,可以接受HTMLElement引用(仅限于JavaScript)。
customClass string | function 在弹出窗口显示时向其添加类。请注意,这些类将添加到模板中指定的任何类之外。要添加多个类,请用空格分隔它们:“class-1 class-2”。

还可以传递一个函数,该函数应返回一个包含其他类名的字符串。

sanitize boolean TRUE 启用或禁用消毒。如果激活“模板”,“内容”和“标题”选项将被清除。
allowList object Default value 包含允许的属性和标记的对象
sanitizeFn null | function null 在这里,您可以提供您自己的消毒功能。如果您喜欢使用专用的库来执行清理,这将非常有用。
offset array | string | function [0, 8] popover相对于其目标的偏移量。您可以用逗号分隔的值在数据属性中传递字符串,例如:data bs offset=“10,20”

当一个函数用于确定偏移量时,调用它的第一个参数是包含popper放置、引用和popper rects的对象。触发元素DOM node作为第二个参数传递。函数必须返回一个包含两个数字的数组:[滑动,距离]。 [滑动, 距离].

popperConfig null | object | function null Popper’s configuration.

当一个函数被用来创建Popper配置时,它被一个包含引导的默认Popper配置的对象调用。它可以帮助您使用默认配置并将其与您自己的配置合并。函数必须返回Popper的配置对象。

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

七、事件

Event type Description
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...
})
  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
Bootstrap弹出框
上一篇: Bootstrap分页
Bootstrap弹出框
下一篇: Bootstrap进度条