Bootstrap introduction (29) JS plugin 6: Popup box

Bootstrap introduction (29) JS plugin 6: Popup box

Add small coverage content, like on ipad, for storing non-primary information

The popup is dependent on the ToolTip plug-in, and it is the same as the ToolTip, which needs to be initialized before it can be used.

First we introduce CSS files and JS files

        <href= "Bootstrap.min.css"  rel= "stylesheet">

        <src= "jquery-3.1.0.min.js"  type= "Text/javascript"> </script>        <src= "Bootstrap.min.js"  type= "Text/javascript"></script>

Let's start by creating a few buttons to trigger

        <Divclass= "Container">            <Buttontype= "button"class= "btn btn-default js-popover"Data-toggle= "PopOver"data-placement= "Bottom"title= "title"data-content= "Content">Pop-up Box 1</Button>        </Div>

His use also requires us to add JS code (Initialize)

(Note that the index here is in class)

        < Script >             $ (". Js-popover"). PopOver ();         </ Script >

Open the page, click the button

We also have another direction, as long as the data-placement= "bottom" inside the bottom changed to left, right, top on it (the default is the side)

In this case, click the button to appear, click the button disappears, sometimes we want to press the blank space to let it disappear what to do?

Just add a new property to the button's properties data-trigger= "Focus" is OK.

        <Divclass= "Container">            <Buttontype= "button"class= "btn btn-default js-popover"Data-toggle= "PopOver"data-placement= "Bottom"title= "title"data-content= "Content"Data-trigger= "Focus">Pop-up Box 1</Button>        </Div>

Refresh the page, click the button, the content appears, click on the blank, disappear.

In fact this is the default has an over-effect, if we want the qualifying effect disappears (that is, suddenly pop suddenly disappear), you can continue to add the property data-animation= "false" can be

Sometimes we want to show up when the page is displayed, you can modify the JS code

        < Script >             $ (". Js-popover"). PopOver ('show') );         </ Script >

Like other JS plugins, he has four situations, appearing before, appearing, hiding before, hiding after

Try the simplest pop-up cue box, which is hidden after

Modify JS Code

        <Script>            $(". Js-popover"). On ("Hidden.bs.popover",function(e) {alert ("Hello");        }); </Script>

Refresh the page, click the button, let the popup box disappear after the prompt hello

Bootstrap introduction (29) JS plugin 6: Popup box