22nd rounds of Bootstrap3.0 Learning (JavaScript plug-in -- pop-up box)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

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 =>      <div =>        <div =></div>        

However, we still need to set a simple basic layout for the elements.
 <style type=>-example-</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.
        <a id= = data-placement= data-content= title=  href= data-original-title=></a>
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=></script>
Four Directions

    <div  style= =>      <div  =>        <button type= = data-container= data-toggle= data-placement= data-content=></button>        <button type= = data-container= data-toggle= data-placement= data-content=></button>        <button type= = data-container= data-toggle= data-placement= data-content=></button>        <button type= = data-container= data-toggle= data-placement= data-content=></button>      </div>    </div>
Then use JavaScript to activate
  <script type=></script>

 

  
  Optional features
 
  
For performance considerations, the data attribute api of The tooltip and the pop-up component is selectively added, that isYou 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 matches.btn-groupOr.input-groupYou must specifycontainer: 'body'Option (see the document below) to avoid unwanted side effects (for example, when displayed in the pop-up box, the page elements to work with may become wider or rounded corners ).

 
 

 

  
  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.
 
  
TodisabledOr.disabledWhen an element is added to the pop-up box, the page element to be added to the pop-up box is wrapped in<div>And then<div>The element application dialog box appears.

 
Usage
Use JavaScript to enable the pop-up box:
$().popover(options)
Option
Options can be passed through the data attribute or JavaScript. For the data attribute, you need to put the option name indata-For exampledata-animation="".
　　
Method
$().popover(options)
The initialization dialog box for a group of elements.
$('#element').popover('show')
The dialog box is displayed.
$().popover()
Hide the dialog box.
$().popover()
Show or hide the dialog box.
$().popover()
Hide and destroy the dialog box.
Event

      $().on(
 

The sample code of Bootstrap3.0 is sometimes incomplete, so it is hard to get confused and speechless during the test. But fortunately, after one night, the effect was finally achieved.
This article has been updated to the Bootstrap3.0 getting started learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html