Home>

This article is mainly to learn about javascript plugin-popup box.

Case

Add a small overlay to the page content,Just like the effect on the iPad,Add extra information to page elements.

First look at a few simple static case renderings

The effect is relatively simple, mainly the static pop-up small form,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>
</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>
</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>
</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>
</div>

But we still need to set a simple basic layout for the element

<style type="text/css">
.bs-example-popover .popover {
position:relative;display:block;float:left;width:240px;margin:20px;
}
</style>

Dynamic presentation

First look at the effect map

A button,When you click the button, the small form on the right will pop up.

Looking at the code, it is actually very simple.

[code]<a data-placement="right" data-content="means disdain for all kinds of behaviors and thoughts of people who have attributes such as short, fat, poor, ugly, stingy, stupid, stingy and so on.The silk (or writing "hanging silk") can be said to have evolved from cursing words "hanging," "hanging," and "hanging.""Silhouette man" mainly refers to a poor family,Such as small families on the ground floor in villages or many cities,No more background,Many junior high schools are suspended,To work in cities,Or become a restaurant waiter,Or become a web cafe webmaster,Get a bitter share of the riches of the city;Or otaku, unemployed,But often refused to admit it,Individuals generally call themselves freelancers."href =" #"data-original-title =" ">please click to toggle popover</a>[code]

Just an a tag, but given the style class of the button,Then give a few attributes,Mainly used to display pop-up boxes:

First:data-original-title-Title

the second:data-content-content

The third:data-placement-position (top, bottom, left, right)

But now if you come to run,The button is there,When you click the button, the pop-up box will not appear,It turned out to be simple,Is that we haven't 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>
<div>
<button type="button" data-container="body" data-toggle="popover" data-placement="left" data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus."></button>
<button type="button" data-container="body" data-toggle="popover" data-placement="top" data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus." ;/button>
<button type="button" data-container="body" data-toggle="popover" data-placement="bottom" data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus." ;/button>
<button type="button" data-container="body" data-toggle="popover" data-placement="right" data-content="vivamus sagittis lacus vel augue laoreet rutrum faucibus."></button>
</div>
</div>

Then use javascript to activate

<script type="text/javascript">
$("#a1"). popover ();
$("[data-toggle=popover]"). popover ();
</script>

Optional features

For performance reasons,The tooltip and popup component's data property api is optional.This means you have to initialize them yourself.

When pop-up boxes are used in button groups and input box groups,Requires additional settings

When the prompt box is with.When combined 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 popup box is displayed,The page elements they work with may become wider or rounded).

When using a pop-up box on a prohibited page element, you need to add an additional element to wrap it

To add a popup to a disabled or .disabled element,Wrap the page element that needs to add a popup in a

, and then apply a popup to this
element.

usage

Enable popups via javascript:

$("#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-, such as data-animation="".

method

$(). popover (options)

Initializes a popup for a group of elements.

$("#element"). popover ("show")

A pop-up box is displayed.

$("#element"). popover ("hide")

Hide the pop-up box.

$("#element"). popover ("toggle")

Show or hide the pop-up box.

$("#element"). popover ("destroy")

Hide and destroy popups.

event

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

If i want to learn more,Can clickHereTo learn,Attached 3 exciting topics for everyone:

  • Previous Javascript Intermediate Grammar Quick Start
  • Next Analysis of the underlying principles of CodeIgniter's coherent operation