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 thetag, not Use thetag, and must also include role="button" and tabindex attributes.

Recommendation: "bootstrap Tutorial"

Example:

 点我 

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

 鼠标移动到我这 

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!