Bootstrap 弹出框参考

  • 通过 data-* 属性启用

    data-toggle="popover" 激活弹出框。
    title 属性指定弹出框的标题文本。
    data-content 属性指定在弹出框主体内显示的文本。
    <div class="container">
          <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容">切换弹出框</a>
        </div>
        <script>
          $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
          });
        </script>
    
    尝试一下
  • 弹出框选项

    可以通过数据属性或 JavaScript 传递选项;对于数据属性,将选项名称附加到 data-,如 data-placement="" 所示。
    参数 类型 默认值 描述 示例
    animation 布尔值 true
    指定在打开和关闭弹出框时是否添加CSS淡入淡出过渡效果
    • true-添加淡入淡出效果
    • false-不添加淡入淡出效果
    尝试一下
    container 字符串或布尔值 false
    将弹出框附加到特定元素
    示例:container:'body'
    尝试一下
    content 字符串 "" 指定弹出框体内的文本 尝试一下
    delay 数字或者对象 0
    指定打开和关闭弹出窗口所需的毫秒数。
    要指定打开延迟和关闭延迟,请使用对象结构:
    delay:{show: 500, hide: 100}-打开弹出窗口需要500毫秒,而关闭弹出窗口仅需要100毫秒
    尝试一下
    html 布尔值 false
    指定是否在弹出窗口中接受HTML标签:
    • true-接受HTML标签
    • false-不接受HTML标记
    注意:必须将HTML插入title属性(或使用title选项)
    当设置为false(默认)时,将使用 jQuery text() 方法;如果您担心XSS攻击,请使用此选项
    尝试一下
    placement 字符串 "right"
    指定弹出位置可能的值:
    • "top" - 顶部弹出框
    • "bottom" - 底部弹出框
    • "left" - 左侧的弹出框
    • "right" - 右侧的弹出框
    • "auto" - 让浏览器确定弹出窗口的位置;例如,如果值为 "auto left",则弹出窗口将在可能的情况下显示在左侧,否则显示在右侧;如果值为 "auto bottom",则弹出窗口将在可能的情况下显示在底部,否则显示在顶部
    尝试一下
    selector 字符串或者布尔值 false 将弹出框添加到指定的选择器 尝试一下
    template 字符串  
    创建弹出框时要使用的基本HTML
    弹出窗口的标题将注入到.popover-header中
    弹出窗口的内容将注入到.popover-body中
    .arrow将成为弹出框的箭头
    最外部的包装器元素应具有.popover类
     
    title 字符串 "" 指定弹出框的标题文本 尝试一下
    trigger 字符串 "click"
    指定如何触发弹出窗口可能的值:
    • "click" - 单击触发弹出框
    • "hover" - 在悬停时触发弹出框
    • "focus" - 当焦点获得焦点时触发弹出框(通过点按或单击.e.g)
    • "manual" - 手动触发弹出框
    提示:要传递多个值,请用空格分隔
    尝试一下
    offset 数字或字符串 0 弹窗相对于目标的偏移量  
    fallbackPlacement 字符串或数组 "flip" 指定Popper在回退时将使用的位置  
    boundary 字符串或元素 "scrollParent" 弹出框的溢出约束边界;接受值“viewport”,“window” 或 “scrollParent”或HTML元素  
  • 弹出框方法

    下表列出了所有可用的弹出框方法。
    方法 描述 示例
    .popover(options) 使用选项激活弹出框;查看上面的参数选项以获取有效值 尝试一下
    .popover("show") 显示弹出框 尝试一下
    .popover("hide") 隐藏弹出框 尝试一下
    .popover("toggle") 切换弹出框 尝试一下
    .popover("dispose") 隐藏并摧毁弹窗 尝试一下
    .popover("enable") 启用弹出框显示的功能;这是默认值  
    .popover("disable") 删除显示弹出框的功能;仅在再次重新启用弹出窗口后才能显示  
    .popover("toggleEnabled") 切换显示或隐藏弹出框的功能  
    .popover("update") 更新弹出框的位置  
  • 弹出框事件

    下表列出了所有可用的弹出框事件。
    事件 描述 示例
    show.bs.popover 在将要显示弹出框时发生 尝试一下
    shown.bs.popover 在完全显示弹出框时发生(在CSS转换完成之后) 尝试一下
    hide.bs.popover 在弹出框即将被隐藏时发生 尝试一下
    hidden.bs.popover 在完全隐藏弹出框时发生(在CSS转换完成之后) 尝试一下
    inserted.bs.popover 将popover模板添加到DOM后,在show.bs.popover事件之后发生