Bootstarp 4 入门之弹出窗 popover

popover

Bootstrap 弹出框的文件与实例,类似 iOS 上的风格,可加在网页上的任何元素上
需要引入Popper.js

初始化

$(function () {
  $('[data-toggle="popover"]').popover()
})

描述

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

data 参数

  • data-placement 方向

    • top 顶部
    • right 右边
    • bottom 底部
    • left 左边
  • data-toggle="popover" 开启

  • data-content 内容

  • title 标题

  • trigger 下次点击时关闭

js 使用

$('#example').popover(options)
Name Type Default Description
animation boolean true 将CSS淡入淡出过渡应用于弹出框
container string | element | false false

将弹出框附加到特定元素。范例:container: 'body'。

content string | element | function ''

如果data-content不存在属性,则为默认内容值。

delay number | object 0

延迟显示和隐藏弹出窗口(ms)-不适用于手动触发类型 如果提供了号码,则延迟会同时应用于隐藏/显示

delay: { "show": 500, "hide": 100 }: delay: { "show": 500, "hide": 100 }

html boolean false 将HTML插入弹出窗口。如果为false,text则将使用jQuery的方法将内容插入DOM。如果您担心XSS攻击,请使用文本。
placement string | function 'right'

显示位置

selector string | false false 如果提供了选择器,则将弹出对象委托给指定的目标。实际上,这用于使动态HTML内容能够添加弹出窗口
template string `````` 创建弹出框时要使用的基本HTML。 弹出窗口title将注入`.popover-header`。 弹出窗口content将注入`.popover-body`。 `.arrow `将成为弹出式窗口的箭头。 最外部的包装器元素应具有.popover此类
title string | element | function ''

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

trigger string 'click' 触发类型: click | hover | focus | manual
offset number | string 0 弹出框相对于目标的偏移量
fallbackPlacement string | array 'flip' 允许指定Popper在回退时将使用的位置
boundary string | element 'scrollParent' 弹出框的溢出约束边界。接受的值`'viewport'`,`'window'`,`'scrollParent'`
sanitize boolean true 启用或禁用清理。如果被激活'template','content'并且'title'选项将被消除。
whiteList object Default value 包含允许的属性和标签的对象
sanitizeFn null | function null 在这里您可以提供自己的清理功能。如果您更喜欢使用专用库来执行清理操作,这将很有用。
popperConfig null | object null 要更改Bootstrap的默认Popper.js配置

回调

事件类型 描述
show.bs.popover show调用实例方法时,将立即触发此事件
shown.bs.popover 当弹出窗口对用户可见时将触发此事件(将等待CSS转换完成)​​。
hide.bs.popover hide调用实例方法后,立即触发此事件
hidden.bs.popover 当向用户隐藏弹出窗口时将触发此事件(将等待CSS转换完成)​​。
insert.bs.popover show.bs.popover当将弹出框模板添加到DOM 后,会在事件发生后触发此事件
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。