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") 更新弹出框的位置 -
-