16th Chapter Popup box and Warning box plugin

Learning Essentials:

1. Popup box
2. Warning Box

Keynote Teacher: Li Tinghui

In this lesson, we'll focus on the pop-up box and the warning box plugin in Bootstrap.

A Pop-up box
A popup box that clicks on an element pops up a container containing the title and content.
Basic usage

<class= "btn btn-lg btn-danger"      type= "button"       Data-toggle= "PopOver"      title= "pop-up box"      data-content= " This is a popup box plugin ">       Click the popup/Hide popup box </button>

JavaScript initialization

$ (' button '). PopOver ();

The popup plugin has a number of properties to configure the display of hints, as follows:

$ (' button '). PopOver ({    ' body ',    viewport: {        ' #view ',        ten,    

There are four ways to do this through JavaScript.

// Show $ (' button '). PopOver (' show '); // Hide $ (' button '). PopOver (' hide '); // invert Show and hide $ (' button '). PopOver (' toggle '); // Hide and Destroy $ (' button '). PopOver (' destroy ');

There are two types of events in the Popover plugin.

Events, other similarities

function () {    alert (' triggers when the Show method is called! ‘

Two Warning Box
The warning box is the message box for the hour of the click.
Basic example

<Divclass= "Alert Alert-warning">                                                                                <Buttonclass= "Close"type= "button"Data-dismiss= "Alert">                                                        <span>&times;</span>                                                                                     </Button>                                                                                                    <P>Warning: Your browser                                                                                             Not supported! </P>                                                                                                     </Div>                                                                                                       

Add a fade effect

<class= "Alert alert-warning fade in">

If you use JavaScript, you can replace data-dismiss= "alert"
JavaScript methods

function () {    $ (' #alert '). Alert (' Close ');})

There are four types of events in the Alert plugin.

Events, other similarities

function () {    alert (' called when the Close method is triggered! ‘

16th Chapter Popup box and Warning box plugin