Add a small overlay to page content, just like the effects on iPad, adding extra information to page elements.
Plugin dependencies
The pop-up box depends on the tooltip plugin, so the tooltip plugin needs to be loaded first.
Selective addition function
For performance considerations, the data attribute api of tooltips and pop-up components are optionally added, which means you must initialize them yourself.
Additional settings are required when pop-up boxes are used in button groups and input box groups
When the prompt box is used in conjunction with .btn-group or .input-group, you need to specify the container: 'body' option (see the documentation below) to avoid unwanted side effects (for example, when the pop-up box appears, the page elements that cooperate with it may become wider or de-rounded).
When using pop-up boxes on prohibited page elements, you need to add an extra element to wrap it up
In order to add a popup box to a disabled or .disabled element, wrap the page element that needs to be added to the popup box in a <div>, and then apply a popup box to this <div> element.
1. Static cases
4 optional options: top, right, bottom, and left arrangement.
Code segment
.bs-example { border-color:#dd; border-radius:4px 4px 0 0; border-width:1px; box-shadow:none; margin-left:0; margin-right:0; border-style:solid; } .bs-example-popover .popover { position: relative; display: block; float: left; width: 240px; margin: 20px; }<h1>3. Popup box</h1> <div> <div> <div></div> <h3>Popover top</h3> <div> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div> <div></div> <h3>Popover right</h3> <div> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> </div> <div> <div></div> <h3>Popover right</h3> <div> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div> <div></div> <h3>Popover bottom</h3> <div> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div> <div></div> <h3>Popover left</h3> <div> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> </div> </div> </div>
Preview effect
Code snippet:
<a href="javascript:void(0)" id="a_pop" data-placement="bottom" data-content=" The wind and rain are like spending time catching up with the white horse. You are still holding the dream in your young palm. Are the clouds surging into summer tears evaporated by the years. Who is she lost on this road? We said we should not separate and be together forever, even if we are enemies with time, even if we are deviating from the whole world, the wind and brighten the snowflakes blow white our hair. When I said, "I still remember that year, the wishes of midsummer are infinite, we hold hands and take turns to sail across the river of sadness. You once said that you should not separate and be together forever, and now I want to ask if you are just a childish saying, innocent years cannot bear to deceive youth. I will live up to you. The heavy snow please don't erase the traces of our being together. The heavy snow cannot erase the marks we give each other. Tonight, the grass is separated and the bright moon night will send you thousands of miles to wait for the autumn wind to come." data-original-title="Time to boil rain" >Click to load</a>
<strong>js initialization:</strong> <script type="text/javascript"> $("#a_pop").popover(); </script>Preview effect:
Note that when a placement is specified, pay special attention to direction issues. Because the pop-up box starts popping up with the center of the trigger event element, it is likely to be overwritten and cannot be displayed all of them.
The a tag href attribute in the code must be specified as javascript:void(0) to remove the link effect.
Four directions:
Code
<a href="javascript:void(0)" id="a_pop1" data-placement="left" data-content= "The wind and rain are like spending time to catch up with the white horse. Are you still holding your sleep in your young palm? The clouds are surging into summer tears evaporated by the years. Are there anyone who lost her way? "data-original-title="Time to cook rain" >Left</a> <a href="javascript:void(0)" id="a_pop2" data-placement="top" data-content= "We said we should not separate and we should always be together, even if we are enemies with time, even if we are departing from the whole world, the wind and snowflakes blow white our hair. Do you remember when we said we would go to the world together?" data-original-title="Time to Boil Rain"> Upper</a> <a href="javascript:void(0)" id="a_pop3" data-placement="bottom" data-content= "The infinite wishes made in the midsummer that year, we held hands and took turns to cross the river of sadness. You once said that we should always be together without separation. Now I want to ask if you are just a child's words." data-original-title="Time to Boil Rain"> Lower</a> <a href="javascript:void(0)" id="a_pop4" data-placement="right" data-content= " Innocent years cannot bear to deceive youth, I live up to you. I will live up to you. The heavy snow please don’t erase the traces of us being together. The heavy snow cannot erase the marks we give each other. Tonight, the grass leaves the bright moon and sends you thousands of miles to wait for the autumn wind to rise in the next year. " data-original-title="Time to Boil Rain"> Right</a> </div> <script type="text/javascript"> $("#a_pop1").popover(); $("#a_pop2").popover(); $("#a_pop3").popover(); $("#a_pop4").popover(); </script>Preview effects;
2. Options
Options can be passed through data properties or JavaScript. For the data attribute, you need to put the option name after data-, for example data-animation="".
Apply data properties to a single pop-up box
For a single popup box, you can specify options separately through the data property, as shown above.
3. Method
$().popover(options)
Initializes the pop-up box for a set of elements.
.popover('show')
Shows the pop-up box.
$('#element').popover('show')
.popover('hide')
Hide the pop-up box.
$('#element').popover('hide')
.popover('toggle')
Show or hide the pop-up box.
$('#element').popover('toggle')
.popover('destroy')
Hide and destroy pop-up box.
$('#element').popover('destroy')
IV. Events
$('#myPopover').on('hidden.bs.popover',function() {// do something…})If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article. I hope it will be helpful for everyone to learn and master the Bootstrap pop-up box.