JS component Bootstrap implementation pop-up box effect code _ javascript skills

This article mainly introduces the relevant information about the code for implementing the pop-up box of JS component Bootstrap. If you are interested in the pop-up box, you can refer to adding a small cover layer for the page content, add additional information to the page elements, just like on the iPad.

Plugin dependency
In the dialog box that appears, the tooltip plug-in must be loaded first.
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 to be added in

And then

The element application dialog box appears.
I. Static Cases
Four Optional options: top, right, bottom, and left.

Code segment

.bs-example   {    border-color:#ddd;    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; } 

3. Dialog Box
  
   
Popover top
    
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
   
  
  
   
Popover right
    
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
   
   
    
   
Popover bottom
    
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
   
   
    
   
Popover left
    
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
   
   
  
 

Preview Effect

Code segment:

Click to load

Js initialization: