How to close pop-up box in bootstrap

Bootstrap method to close the popover box: first add "data-toggle="popover"" to the element to create the popover box; then use the "data-trigger="focus"" attribute to set the mouse click outside the element area to close the pop-up box.

#The operating environment of this article: Windows7 system, bootstrap3, Dell G3 computer.

bootstrap popover

Create a popover by adding data-toggle="popover" to the element.

• The content of the title attribute is the title of the pop-up box.

• The data-content attribute displays the text content of the pop-up box.

• By default the popup box is displayed on the right side of the element. You can use the data-placement attribute to set the direction of the pop-up box display: top: bottom, left: left or right: right.

#How to close the pop-up box in bootstrap?

By default, the pop-up box will close after clicking the specified element again. You can use the data-trigger="focus" attribute to set the pop-up box to close when the mouse clicks outside the element.

Achieving the "click and make the pop-up box disappear" effect requires some additional code

For better cross-browser and cross-platform effects, you must use the tag, not Use the tag, and must also include role="button" and tabindex attributes.

Recommendation: "bootstrap Tutorial"

Example:

<a tabindex="0" href="#" role="button" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">
点我
</a>

If you want to realize that when the mouse moves to To display the effect on an element and disappear after removal, you can use the data-trigger attribute and set the value to "hover":

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">
鼠标移动到我这
</a>

The above is the detailed content of How to close pop-up box in bootstrap. For more information, please follow other related articles on the PHP Chinese website!