Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to set up the suspension window in bootstrap". In the daily operation, I believe that many people have doubts about how to set up the suspension window in bootstrap. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to set up suspension window in bootstrap". Next, please follow the editor to study!

Bootstrap set suspension window method: 1, create Html code; 2, define a hyperlink, and introduce the corresponding page css and js;3, through the bootstrap popover plug-in to achieve suspension window effect.

This article operating environment: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

How does bootstrap set up suspension windows?

Using BootStrap to realize the effect of floating window

People who often play social networking sites must be very common in such a scenario, as shown in the figure:

Hover the mouse over a hyperlink, and then a floating box appears with some information about the account.

I happen to be doing some front-end things recently, involving similar requirements. Mouse hover, a floating box appears, which describes some specific information. I actually referred to an article on the Internet before, but I thought it was a little too complicated. And found: the magic bootstrap comes with this feature.

So I did it with bootstrap's popover plug-in, and the effect was good. Although it is very simple, but still commemorate.

Define a hyperlink and note that the necessary css and js for the corresponding page must be introduced:

Html code

The data-toggle= "popover" attribute binds the pop-up window effect for the hyperlink, data-placement= "bottom" specifies the location of the pop-up window relative to the hyperlink, and data-trigger= "hover" is the key to trigger the pop-up window display when hovering. No, no, no.

Some common properties about the popover plug-in for bootstrap are as follows:

Option name Type / default Data attribute name description

Animationboolean

Default: truedata-animation applies the CSS fade transition effect to the pop-up box. Htmlboolean

Default: falsedata-html inserts HTML into the pop-up box. The text method if false,jQuery will be used to insert content into the dom. If you are worried about XSS attacks, use text. Placementstring | function

Default: topdata-placement specifies how to locate the pop-up box (that is, top | bottom | left | right | auto).

When auto is specified, the pop-up box is adjusted dynamically. For example, if placement is "auto left", the pop-up box will appear on the left as much as possible, and only on the right if circumstances do not allow it. Selectorstring

Default: if falsedata-selector provides a selector, the pop-up object will be delegated to the specified target. Titlestring | function

Default value:''data-title if the title attribute is not specified, the title option is the default title value. Triggerstring

Default value: 'hover focus'data-trigger defines how the pop-up box is triggered: click | hover | focus | manual. You can pass multiple triggers, each separated by a space. Delaynumber | object

Default: the number of milliseconds that 0data-delay delays showing and hiding pop-ups-does not apply to manual manual trigger types. If a number is provided, the delay will be applied to show and hide. If an object is provided, the structure is as follows: delay: {show:500, hide:100} containerstring | false

Default: falsedata-container appends a pop-up box to the specified element.

Example: container: 'body'

Common methods:

Method describes the instance Options:. Popover (options) attaching a pop-up box handle to the element collection.

$() .popover (options) Toggle: .popover ('toggle') toggles the pop-up box that shows / hides the element. $('# element'). Popover ('toggle') Show:. Popover (' show') displays the pop-up box of the element. $('# element'). Popover ('show') Hide:. Popover (' hide') hides the pop-up box of the element. $('# element'). Popover ('hide') Destroy:. Popover (' destroy') hides and destroys the pop-up box of the element. $('# element'). Popover ('destroy')

All right, the next point is the Js part.

(function () {$("[data-toggle='popover']") .popover ({html: true, title: title (), delay: {show:500, hide:1000}, content: function () {return content ();}});})

Let's simulate the title and content of dynamically loading the suspension box:

/ / simulate dynamic loading of the title (real situation may have ajax interaction with the background) function title () {return 'Tian Xibi Hebe' } / / simulate dynamic loading of content (real situation may interact with backend ajax) function content () {var data = $("fans: 7389223" + "follow: 265" +" Weibo: 645" + "location: Taiwan" + "); return data } / / Click the button in the simulation suspension box to operate function test () {alert ('focus on success');}

View the results:

At this point, the study on "how to set up the suspension window in bootstrap" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.