Bootstrap modal Box (Modal) plugin _javascript tips for everyday learning

In this lesson we mainly learn about the Bootstrap modal box plug-ins, this is an interactive web site is very common window function plug-ins.

More about Bootstrap modal box plug-in content please click on the topic "Bootstrap modal use of the tutorial" to learn, I hope you like to continue below

A Basic use
the use of the modal frame of the window component requires three-layer div container elements, respectively, modal (modal declaration layer),
Dialog (Window Declaration layer), Content (contents layer). Inside the content layer, there are three layers, namely header (head), body (main), footer (footnote).
Basic example

<!--modal declaration showing-->
<div class= "modal Show" tabindex= "-1" >
 <!--window Declaration-->
 <div class= "Modal-dialog" >
 <!--content declaration-->
 <div class= "Modal-content" >
 <!--head-->
 <div class= "Modal-header" >
 <button type= "button" class= "Close"
 data-dismiss= "modal" >
 <span>x</span>
 </button>
 
 
 

If you want the modal box to automatically hide, and then click the button to play the window, then you need to do the following action.

The modal box removes show and adds an ID

<div class= "modal" id= "Mymodal" >
//Click Trigger Modal box to display

<button class= "btn Btn-primary btn-lg "data-toggle=" modal "data-target=" #myModal ">
 click on the window of the Windows
</button>
//The size of the window is three kinds, The default is normal, there are LG (large) and SM (small)

<div class= "Modal-dialog modal-lg" > <div class= "modal-dialog sm-lg
" >
//You can set the fade effect

<div class= "Modal Fade" id= "Mymodal" >
//fluid in the main section using the grid system


<!--main body-->
<div class= "Modal-body" >
 <div class= "Container-fluid" >
 <div class= "Row" >
 <div class= "Col-md-4" >
 1
 </div>
 <div class= "Col-md-4" >
 1
 </div>
 <div class= "Col-md-4" >
 1
 </div>
 </div>
 </div>
</div >

Two Usage instructions
after the introduction of basic usage, we will look at the various important uses of plug-ins. All Plug-ins are based on Javascript/jquery. Then there are four elements: usage, parameters, methods, and events.
1. Usage
The first: You can use the Data property

Data-toggle

data-toggle= "modal" data-target= "#myModal"

Data-toggle indicates the type of trigger
Data-target indicates the node that is fired

If it is not used <button>, but <a>, where data-target can also use href= "#myModal"

Replace. Of course, we recommend using Data-target. In addition to the Data-toggle and data-target two declaration properties, there are some options available.

2. Parameter
You can control the effect by setting the Data-* property declaration on the HTML element.

Blank background and click Do not close

data-backdrop= "false"/
/press ESC not to turn off

data-keyboard= "false"
//Initialize hidden, if the button is clicked to trigger, The first click can not be displayed, the second display.

data-show= "false"
//load once index.html into container

href= "index.html"

Of course, you can also set it directly in JavaScript.

DECLARE

$ (' #myModal ') in JQuery mode. Modal ({
 show:true,
 backdrop:false,
 keyboard:false,
 Remote: ' Index.html ',
}); 

3. Methods
If the default does not show the window, then how can you click the window before and after the flick?

Click

on the Display window $ (' #btn '). On (' click ', Function () {
 $ (' #myModal '). Modal (' show ');
}; 

4. The event
The Modal box supports 4 kinds of time, respectively corresponding to eject before, eject, before and after closing.

$ (' #myModal '). On (' Show.bs.modal ', function () {
 alert (' triggered immediately when the Show method calls! ');
});

$ (' #myModal '). On (' Shown.bs.modal ', function () {
 alert (' triggered after the modal box is displayed! ');
});

$ (' #myModal '). On (' Hide.bs.modal ', function () {
 alert (' triggered immediately when the Hide method calls! ');
});

$ (' #myModal '). On (' Hiden.bs.modal ', function () {
 alert (' triggered after the modal box is displayed! ');
});

$ (' #myModal '). On (' Loaded.bs.modal ', function () {
 alert (' Fire after remote data loading! ');
});

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn.