A modal box (Modal) is a child form that is overlaid on the parent form. Typically, the purpose is to display content from a separate source, which can have some interaction without leaving the parent form. The subform can provide information, interaction, etc.
If you want to reference the functionality of the plugin separately, then you need to reference modal.js. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
1. Usage
You can toggle the hidden contents of the Modal Box (Modal) plugin:
Through data attribute: Set the attribute data-toggle="modal" on the controller element (such as a button or link), and set data-target="#identifier" or href="#identifier" to specify the specific modal box to switch (with id="identifier").
With JavaScript: Using this technique, you can call a modal box with id="identifier" through a simple line of JavaScript:
$('#identifier').modal(options)
2. Simple example
div id="myModal"><div><button type="button" data-dismiss="modal">x</button><h3>Dial Box Title</h3></div><div><p>Dial Box Body</p></div><div><a href="#" data-dismiss="modal">Cancel</a><a href="#" data-dismiss="modal">Confirm</a></div></div>
The modal dialog can be called directly using a button or a link, and this is the simple usage:
Copy the code as follows: <a href="#modal1" role="button" data-toggle="modal">Contract Add</a>
In addition, when you need to make the dialog box clear the form data every time it is opened, as follows:
The code copy is as follows: $('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //After adding the contract, clear the form operation
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.