Bootstrap JS 弹出框

JS 弹出窗口 (popover.js)

Popover 插件类似于工具提示；它是当用户单击某个元素时出现的弹出框。不同之处在于弹出窗口可以包含更多内容。

插件依赖项：弹出窗口需要工具提示插件 (tooltip.js) 包含在您的 Bootstrap 版本中。

有关 Popover 的教程，请阅读我们的Bootstrap 弹出窗口教程。

通过 data-* 属性

这个data-toggle="popover"激活弹出窗口。

这个title属性指定弹出窗口的标题文本。

这个data-content属性指定应显示在弹出窗口主体内的文本。

示例

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

亲自试一试 »

通过JavaScript

Popover 不是纯 CSS 插件，因此必须使用 jQuery 进行初始化：选择指定的元素并调用 popover()方法。

示例

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();

亲自试一试 »

弹出选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，请将选项名称附加到 data-，如 data-placement=""。

Name	Type	Default	Description	尝试一下
animation	boolean	true	Specifies whether to add a CSS fade transition effect when opening and closing the popover true - Add a fading effect false - Do not add a fading effect	尝试一下
container	string, or the boolean false	false	Appends the popover to a specific element. Example: container: 'body'	尝试一下
content	string	""	Specifies the text inside the popover's body	尝试一下
delay	number, or object	0	Specifies the number of milliseconds it will take to open and close the popover. To specify a delay for opening and another one for closing, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it	尝试一下
html	boolean	false	Specifies whether to accept HTML tags in the popover: true - Accept HTML tags false - Do not accept HTML tags Note: The HTML must be inserted in the title attribute (or using the title option). When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks	尝试一下
placement	string	"right"	Specifies the popover position. Possible values: "top" - Popover on top "bottom" - Popover on bottom "left" - Popover on left "right" - Popover on right "auto" - Lets the browser decide the position of the popover. For example, if the value is "auto left", the popover will display on the left side when possible, otherwise on the right. If the value is "auto bottom", the popover will display at the bottom when possible, otherwise on the top	尝试一下
selector	string, or the boolean false	false	Adds the popover to a specified selector	尝试一下
template	string		Base HTML to use when creating the popover. The popover's title will be injected into the .popover-title. The popover's content will be injected into the .popover-content. .arrow will become the popover's arrow. The outermost wrapper element should have the .popover class.
title	string	""	Specifies the header text of the popover	尝试一下
trigger	string	"click"	Specifies how the popover is triggered. Possible values: "click" - Trigger the popover with a click "hover" - Trigger the popover on hover "focus" - Trigger the popover when it gets focus (by tabbing or clicking .e.g) "manual" - Trigger the popover manually Tip: To pass multiple values, separate them with a space	尝试一下
viewport	string, or object	{selector: "body", padding: 0}	Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or {selector: '#viewport', padding: 0}

弹出框方法

下表列出了所有可用的弹出窗口方法。

Method	Description	尝试一下
.popover(options)	Activates the popover with an option. See options above for valid values	尝试一下
.popover("show")	Shows the popover	尝试一下
.popover("hide")	Hides the popover	尝试一下
.popover("toggle")	Toggles the popover	尝试一下
.popover("destroy")	Hides and destroys the popover	尝试一下

弹出窗口事件

下表列出了所有可用的弹出窗口事件。

Event	Description	尝试一下
show.bs.popover	Occurs when the popover is about to be shown	尝试一下
shown.bs.popover	Occurs when the popover is fully shown (after CSS transitions have completed)	尝试一下
hide.bs.popover	Occurs when the popover is about to be hidden	尝试一下
hidden.bs.popover	Occurs when the popover is fully hidden (after CSS transitions have completed)	尝试一下

码农教程 - 一技在手,衣食无忧!