Simple use of Bootstrap modal dialog box _javascript tips

The modal Box (Modal) is a subform that is overwritten on the parent form. Typically, the intent is to display content from a single source, and you can interact without leaving the parent form. subforms provide information, interactivity, and so on.

If you want to refer to the functionality of the plug-in separately, you need to refer to modal.js. Alternatively, as mentioned in the Bootstrap Plug-in Overview chapter, you can refer to the Bootstrap.js or compressed version of Bootstrap.min.js.
1. Usage
You can toggle the hidden contents of the Modal box (Modal) Plug-in:
With the Data property: Set the property data-toggle= "modal" on the controller element (such as a button or link) and set the data-target= "#identifier" or href= "#identifier" To specify the specific modal box (with id= "identifier") to switch.
JavaScript: Using this technique, you can invoke a modal box with id= "identifier" with a simple line of javascript:
$ (' #identifier '). Modal (options)
2. Simple example

Div id= "Mymodal" class= "Modal Hide Fade" >
<div class= "Modal-header" >
<button type= "button" class= "Close" data-dismiss= "modal" >x</button>
 
 

You can use a button or link to call the modal dialog box directly, which is a simple usage:

Copy Code code as follows:

<a href= "#modal1" role= "button" class= "btn btn-primary btn-sm" data-toggle= "modal" > Contract add </a>

In addition, when you need to make the dialog box open each time the form data is emptied, the following:

Copy Code code as follows:

$ (' #modal1 '). Modal (' hide ');
$ ("#modal1"). On ("Hidden", function () {$ (' #form1 ') [0].reset ();}); After you add a contract, empty the form operation

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.