A brief analysis of the use of BootStrap modal box (classic)_javascript skills

A brief overview of BootStrap modal box

Bootstrap Modals are created using a custom Jquery plugin. It can be used to create modal windows to enrich user experience, or to add practical functions to users. You can use Popovers and Tooltips in Modals.

1, Bootstrap modal dialog box and simple use

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</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:

<a href="#modal1" role="button" class="btn btn-primary btn-sm" data-toggle="modal">合同添加</a> 

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

$('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //添加合同后,清空表单操作

The above content is the use of BootStrap modal box introduced by the editor. I hope it will be helpful to everyone. For more exciting content, please pay attention to the Script House website!