This article mainly learns the JavaScript plug-in-pop-up box.
Case
Add a small overlay to page content, just like the effects on iPad, adding extra information to page elements.
Let's take a look at a few simple static case renderings
The effect is relatively simple, mainly the small form that pops up statically, divided into form title and form content.
<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><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><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><h3>Popover left</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 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>
But we still need to set a simple basic layout for the elements
<style type="text/css">.bs-example-popover .popover {position: relative; display: block; float: left; width: 240px; margin: 20px;}</style>Dynamic Demo
Let's take a look at the renderings first
A button will pop up when you click the button.
It's actually very simple to read the code.
[code]<a id="a2" data-placement="right" data-content="that is, to express contempt for various shocking behaviors and ideas that have attribute characteristics such as short, fat, poor, ugly, ugly, stupid, and masturbation. Silk (or writing "sling silk") can be said to have evolved from swearing words "dead", "hang" and "sling" to "sling". "Silk men" mainly refer to most of them from poor families, such as rural or many urban bottom-level petty households, without more backgrounds, many junior high schools suspended school, went to the city to work, or became restaurant waiters, or Internet cafe Internet administrators, and got a cup of bitter soup in the wealth of the city; or were otaku and unemployed vagrants, but they usually refused to admit it. Individuals generally call themselves freelancers." href="#" data-original-title="silk original meaning"> Please Click to toggle popover </a>[code]
It is just a label, but gives the style class of the button, and then gives several attributes, which are mainly used to display the pop-up box:
The first one: data-original-title - title
The second: data-content-content
Third: data-placement-position (up, bottom, left, right)
But now if you run it, the button has it, and the pop-up box when you click the button will not appear. It turned out to be very simple, that is, we have not initialized it yet, just like the tooltip in the previous section.
Just add simple JavaScript code.
<script type="text/javascript">$("#a1").popover();</script>Four directions
<div style="margin-left:200px;margin-top:100px;margin-bottom:200px;"><div><button type="button" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> left-handed bullet box</button><button type="button" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> The upper pop-up box</button><button type="button" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> The lower pop-up box</button><button type="button" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> right side bullet box</button></div></div>
Then use JavaScript to activate
<script type="text/javascript">$("#a1").popover();$("[data-toggle=popover]").popover();</script>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.
usage
Enable pop-up boxes via JavaScript:
$('#example').popover(options)
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="".
method
$().popover(options)
Initializes the pop-up box for a set of elements.
$('#element').popover('show')
Shows the pop-up box.
$('#element').popover('hide')
Hide the pop-up box.
$('#element').popover('toggle')
Show or hide the pop-up box.
$('#element').popover('destroy')
Hide and destroy pop-up box.
event
$('[data-toggle=popover]').on('shown.bs.popover', function (){alert(1);})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 JavaScript programming.