Simple use of the Bootstrap Modal Dialog Box and the bootstrap Modal Dialog Box

Simple use of the Bootstrap Modal Dialog Box and the bootstrap Modal Dialog Box

Modal)Is a child form that overwrites the parent form. Normally, the purpose is to display the content from a separate source. Some interactions can be made without leaving the parent form. Subforms provide information and interaction.

If you want to independently reference the functions of the plug-in, you need to reference modal. js. Alternatively, as mentioned in the Bootstrap plug-in overview chapter, you can reference bootstrap. js or the compressed version of bootstrap. min. js.
1. Usage
You can switch the hidden content of the Modal plug-in:
Data Attribute: Set the attribute data-toggle = "modal" on the Controller element (such as a button or link ", set data-target = "# identifier" or href = "# identifier" to specify the specific modal box (with id = "identifier") to be switched ").
Using JavaScript: You can call a modal box with id = "identifier" by using a simple line of JavaScript:
$ ('# Identifier'). modal (options)
2. Simple instances

Div id = "myModal" class = "modal hide fade"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal"> x </button> 
You can use buttons or links to directly call the modal dialog box. This is a simple usage:
Copy codeThe Code is as follows: <a href = "# modal1" role = "button" class = "btn-primary btn-sm" data-toggle = "modal"> contract addition </a>
In addition, when you need to make the dialog box clear the form data each time it is opened, as shown below:
Copy codeThe Code is as follows: $ ('# modal1'). modal ('hide ');
$ ("# Modal1 "). on ("hidden", function () {$ ('# form1') [0]. reset () ;}); // clear the form after adding the contract
The above is all the content of this article, hoping to help you learn.