Simple use of Bootstrap modal dialog_javascript skills

Modal is a subform covering the parent form. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent form. Subforms provide information, interaction, and more.

If you want to reference the functionality of this plugin separately, then you need to reference modal.js. Alternatively, as mentioned in the Bootstrap Plugin Overview chapter, you can reference bootstrap.js or a minified version of bootstrap.min.js.
1. Usage
You can switch the hidden content of the modal plugin:
Through the 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 mode to be switched. status box (with id="identifier").
Via JavaScript: Using this technique, you can call a modal 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>
<h3 id="对话框标题">对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div>

Modal dialogs can be called directly using buttons or links, here is the simple usage:

Copy code The code is as follows:

Contract Add

In addition, when you need to enable the dialog box to clear the form data every time it is opened, as follows:

Copy code The code is as follows:

$('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //After adding the contract, clear the form operation

The above is the entire content of this article, I hope it will be helpful to everyone’s study.