Bootstrap tutorial JS plug-in pop-up box learning notes sharing, bootstrap learning notes

Bootstrap tutorial JS plug-in pop-up box learning notes sharing, bootstrap learning notes

This article mainly describes the JavaScript plug-in-pop-up box.

Case

Add a small cover layer for the page content, just like the effect on the iPad, to add additional information to the page element.

Let's look at a few simple static cases.

Simple results mainly include static pop-up small forms, including the form title and form content.

<div class="bs-example bs-example-popover"><div class="popover top"><div class="arrow"></div>

However, 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 demonstration
Let's take a look

A button. When you click the button, a small form on the right will pop up.
Reading the code is actually quite simple.
[Code] <a id = "a2" class = "btn-lg btn-danger" data-placement = "right" data-content = "indicates that, the various actions and thoughts on the characteristics of poor, ugly, embarrassing, staying, and embarrassing indicate contempt. Diaosi (or "hanging silk" in writing) can be said to have evolved from the swearing words "", "hanging", and ". "Diaosi male" mainly refers to families with poor backgrounds, such as rural areas or families of small citizens at the bottom of many cities. Many junior high schools are suspended and migrant workers are working, or become a restaurant waiter, or become an Internet cafe Network Administrator, in the city's wealth of a cup of bitter soup; or otaku, unemployed travel, but usually refused to admit, the individual is generally called a freelancer. "Title =" "href =" # "data-original-title =" "> Please Click to toggle popopover </a> [code]
This is a label, but the style class of the button is assigned, and then several attributes are given, mainly used to display the pop-up box:
First:Data-original-title -- title
Second:Data-content -- content
Third:Data-placement -- position (top, bottom, bottom, left, right)
But now, if you run the button, it will not appear when you click the button in the pop-up box. It turns out very simple, that is, we haven't initialized it yet, just like the tooltip in the previous section.
You only need to add simple JavaScript code.
<script type="text/javascript">$("#a1").popover();</script>
Four Directions

<Div style = "margin-left: 200px; margin-top: 100px; margin-bottom: 200px; "class =" bs-example tooltip-demo "> <div class =" bs-example-tooltips "> <button type =" button "class =" btn-default "data -container = "body" data-toggle = "popover" data-placement = "left" data-content = "Vivamus sagittis lacus vel auleglaoreet rutrum faucibus. "> left-side dialog box </button> <button type =" button "class =" btn-default "data-container =" body "data-toggle =" popover "data- placement = "top" data-content = "Vivamus sagittis lacus vel augue laoreet rutrum faucibus. "> dialog box </button> <button type =" button "class =" btn-default "data-container =" body "data-toggle =" popover "data- placement = "bottom" data-content = "Vivamus sagittis lacus vel augue laoreet rutrum faucibus. "> dialog box </button> <button type =" button "class =" btn-default "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>
Then use JavaScript to activate
<script type="text/javascript">$("#a1").popover();$("[data-toggle=popover]").popover();</script>
Optional features
In terms of performance, the data attribute APIs of The tooltip and the pop-up widget are selectively added, that is, you must initialize them yourself.
Additional settings are required when the pop-up box is used in the button group and input box group.
When the prompt box and. btn-group or. when using an input-group combination, you must specify the container: 'body' option (see the following document) to avoid unwanted side effects (for example, after the pop-up box is displayed, the page element to work with may become wider or rounded ).
When you use the pop-up box on a page element that is not allowed, you need to add an additional element to wrap it.
To add a pop-up box to the disabled or. disabled element, wrap the page element that requires the pop-up box in a <div> and apply the pop-up box to the <div> element.
Usage
Use JavaScript to enable the pop-up box:
$ ('# Example'). popover (options)
Option
Options can be passed through the data attribute or JavaScript. For the data attribute, you need to put the option name after data-, for example, data-animation = "".

Method
$ (). Popover (options)
The initialization dialog box for a group of elements.
$ ('# Element'). popover ('show ')
The dialog box is displayed.
$ ('# Element'). popover ('hide ')
Hide the dialog box.
$ ('# Element'). popover ('toggle ')
Show or hide the dialog box.
$ ('# Element'). popover ('deststroy ')
Hide and destroy the dialog box.
Event

$('[data-toggle=popover]').on('shown.bs.popover', function (){alert(1);})

The above is all the content of this article, and I hope it will help you learn javascript programming.