Home > Developer > Web Develop

Bootstrap-js (vi) Popup box

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Instance

Add a small floating layer for any element to hold non-primary information.

The title of the PopOver and the length of the content are all 0 words will never be displayed.

Initialization

For performance reasons, ToolTips and popup data programming interfaces (data APIs) must be initialized manually .

The way to initialize all pop-up boxes on one page at once is by selecting the data-toggle property

<! DOCTYPE html>
<link href= "/stylesheets/bootstrap.min.css" rel= "stylesheet" >
<script src= "/scripts/jquery.min.js" ></script>
<script src= "/scripts/bootstrap.min.js" ></script>
<body>
<div class= "Container" style= "padding:100px 50px 10px;" >
<button type= "button" class= "btn Btn-default" title= "Popover title"
Data-container= "Body" data-toggle= "PopOver" data-placement= "left"
Data-content= "Some content in Popover on the left" >
Popover on the left
</button>
<button type= "button" class= "btn btn-primary" title= "Popover title"
Data-container= "Body" data-toggle= "PopOver" data-placement= "Top"
Data-content= "Some content in the top Popover" >
Top of the Popover
</button>
<button type= "button" class= "btn btn-success" title= "Popover title"
Data-container= "Body" data-toggle= "popover" data-placement= "Bottom"
Data-content= "Some content in the Popover at the bottom" >
Bottom of the Popover
</button>
<button type= "button" class= "btn btn-warning" title= "Popover title"
Data-container= "Body" data-toggle= "popover" data-placement= "right"
Data-content= "Some content in Popover on the right" >
Popover on the right
</button>
</div>

<script>$ (function ()
{$ ("[data-toggle= ' PopOver ']"). PopOver ();
});
</script>
</body>

1. UsageThrough JavaScript

Enable the popup box (PopOver) via JavaScript:

    1. $(' #example '). PopOver(options)
2. Parameters

Parameters can be passed through the Data property or JavaScript. For the Data property, attach the parameter name to data- , such as data-animation= "".

Option Name type/Default value Data Property name Description
Animation Boolean
Default value: True		 Data-animation Gives the popup a fade-out CSS animation effect.
Html Boolean
Default value: False		 Data-html Inserts HTML into the popup box. If the text method is false,jquery, it will be used to insert content into the DOM. If you are concerned about XSS attacks, use text.
Placement String|function
default value: Top		 Data-placement Specifies how to position the popover (that is, Top|bottom|left|right|auto).
When auto is specified, the popup is dynamically adjusted. For example, if placement is "auto left", the pop-up box will appear on the right side as much as possible, and it will appear on the far side if the situation is not allowed.
Selector String
Default value: False		 Data-selector If a selector is provided, the PopOver object is delegated to the specified target.
Title string | function
default value: '		 Data-title If the title property is not specified, the title option is the default title value.
trigger string
Default value: ' Hover Focus ' 		data-trigger defines how the popup box is triggered: click| hover | focus | manual . You can pass multiple triggers, separated by a space between each trigger.
delay number | object
Default value: 0
  1. delay< Span class= "pun" >:
  2. { Show: 500 Hide: 100
Container string | False
Default value: False		 Data-container Appends a popup box to the specified element.
Example: container: ' Body '

3. Methods

Here are some useful methods in the pop-up box (Popover) Plugin:

Method Description Example
options: . PopOver (Options) Attaches a popup handle to the collection of elements.
  1. $(). popover(options)
Toggle: . PopOver (' Toggle ') Toggles the pop-up of the show/hide element.
  1. $(' #element '). PopOver(' Toggle ')
Show: . PopOver (' show ') Displays the pop-up box for the element.
  1. $(' #element '). PopOver(' show ')
Hide: . PopOver (' hide ') The popup box for the hidden element.
  1. $(' #element '). PopOver(' hide ')
Destroy: . PopOver (' Destroy ') Hides and destroys the popup box for the element.
  1. $(' #element '). PopOver(' Destroy ')

<! DOCTYPE html>
<link href= "/stylesheets/bootstrap.min.css" rel= "stylesheet" >
<script src= "/scripts/jquery.min.js" ></script>
<script src= "/scripts/bootstrap.min.js" ></script>
<body>
<div class= "Container" style= "padding:100px 50px 10px;" >
<button type= "button" class= "Btn btn-default popover-show"
title= "Popover title" data-container= "Body"
Data-toggle= "PopOver" data-placement= "left"
data-content= "Some content--show methods in the Popover on the left" >
Popover on the left
</button>
<button type= "button" class= "Btn btn-primary popover-hide"
title= "Popover title" data-container= "Body"
Data-toggle= "PopOver" data-placement= "Top"
data-content= "Some content--hide methods in the top Popover" >
Top of the Popover
</button>
<button type= "button" class= "Btn btn-success Popover-destroy"
title= "Popover title" data-container= "Body"
Data-toggle= "PopOver" data-placement= "Bottom"
data-content= "Some content--destroy methods at the bottom of Popover" >
Bottom of the Popover
</button>
<button type= "button" class= "Btn btn-warning popover-toggle"
title= "Popover title" data-container= "Body"
Data-toggle= "PopOver" data-placement= "right"
data-content= "Some content--toggle methods in the Popover on the right" >
Popover on the right
</button><br><br><br><br><br><br>
<p class= "Popover-options" >
<a href= "javascript:void (0);" type= "button" class= "btn btn-warning" title= "Data-container= "Body" data-toggle= "PopOver" data-content= "
Some content--options methods in Popover
</a>
</p>
<script>
$ (function () {$ ('. Popover-show '). PopOver (' Show ');});
$ (function () {$ ('. Popover-hide '). PopOver (' hide ');});
$ (function () {$ ('. Popover-destroy '). PopOver (' Destroy ');});
$ (function () {$ ('. Popover-toggle '). PopOver (' Toggle ');});
$ (function () {$ (". Popover-options a"). PopOver ({html:true});});
</script>
</div>
</body>

4. Events

The following table lists the events to use in the pop-up box (Popover) plugin.

Events Description Example
show.bs.popover when call show The event is triggered immediately when the instance method is
  1. $ ( ' #mypopover ' ( ' show.bs.popover ' , function () {
  2. //perform some actions ...
  3. })
shown.bs.popover This event is triggered when the popup is visible to the user (will wait for the CSS transition to finish).
  1. $ ( ' #mypopover ' ( ' shown.bs.popover ' , function () {
  2. //perform some actions ...
  3. })
hide.bs.popover when calling Hide The event is triggered immediately when the instance method is
  1. $ ( ' #mypopover ' ( ' hide.bs.popover ' , function () {
  2. //perform some actions ...
  3. })
Hidden.bs.popover This event is triggered when a ToolTip is hidden from the user (will wait for the CSS transition effect to complete).
  1. $(' #mypopover '). On(' hidden.bs.popover ', function () {
  2. //Perform some actions ...
  3. })

<! DOCTYPE html>
<link href= "/stylesheets/bootstrap.min.css" rel= "stylesheet" >
<script src= "/scripts/jquery.min.js" ></script>
<script src= "/scripts/bootstrap.min.js" ></script>
<body>
<div clas= "Container" style= "padding:100px 50px 10px;" >
<button type= "button" class= "Btn btn-primary popover-show"
title= "Popover title" data-container= "Body"
Data-toggle= "PopOver"
data-content= "Some content--show methods in the Popover on the left" >
Popover on the left
</button>
</div>
<script>
$ (function () {$ ('. Popover-show '). PopOver (' Show ');});
$ (function () {$ ('. Popover-show '). On (' Shown.bs.popover ', function () {
Alert ("warning message when displayed");
})});
</script>
</body>

Bootstrap-js (vi) Popup box

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More