This article describes in detail the simple use of the Bootstrap modal dialog box. For more information, see
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
P id = "myModal" class = "modal hide fade">XDialog Box title
Dialog Box subject
Cancel OK
You can use buttons or links to directly call the modal dialog box. This is a simple usage:
The Code is as follows:
Contract Addition
In addition, when you need to make the dialog box clear the form data each time it is opened, as shown below:
The 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.