阻止模态框自动关闭
模态框这个功能对于我们来说在熟悉不过了，但是我们所设置的模态框存在一个小问题不知道大家发现没有。这个问题就是点击模态框的背景空白处的时候就会自动关闭，想想就会觉得烦。因为不管你是否在模态框里填写完整你所需要录入或者修改的信息，你只要一不小心误点了背景的空白处，它就会自动给你关了模态框。如果不找到解决的方法，就会一直存在这种现象，给人一种很糟糕的用户体验。
举个例子说明，先写一个新增的模态窗体，代码如下：
<!-- Modal 新增学院模态窗体-->
<div class="modal fade" id="modalInsertAcademe">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" id="xz">
新增学院
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="formInsetAcademe" class="form-horizontal" onsubmit="return false;">
<!--重置表单-->
<input type="reset" hidden />
<div class="form-group form-row">
<label class="col-form-label col-3" for="IAcademeName">学院名称：</label>
<div class="col-9">
<input type="text" class="form-control" name="AcademeName" id="IAcademeName" />
</div>
</div>
<div class="form-group form-row">
<label class="col-form-label col-3" for="IAcademeCode">学院代号：</label>
<div class="col-9">
<input type="text" class="form-control" name="AcademeCode" id="IAcademeCode" />
</div>
</div>
<div class="form-group form-row justify-content-center">
<div class="col-4">
<button type="submit" class="btn btn-outline-success mr-3" onclick="savaInsert()">保存</button>
<button type="button" class="btn btn-outline-secondary " data-dismiss="modal">关闭</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
样式设置完了以后，在给它写一个点击事件。通常情况下，都会这样写：
//打开新增模态框
function openInsert() {
//重置表单
$('#formInsertAcademe input[type="reset"]').click();
//打开模态框
$("#modalInsertAcademe").modal('show');
}
仅仅这样写是不够的，要考虑到点击背景空白处和按下esc键触发事件这两种情况，就需要把'show'改为：{ backdrop: 'static', keyboard: false }，即可。新的写法如下
//打开新增模态框
$("#openInsert").click(function () {
//重置表单
$('#formInsertAcademe input[type="reset"]').click();
//打开模态框
$("#modalInsertAcademe").modal({ backdrop: 'static', keyboard: false })
});
其中 ，backdrop：’static’指的是点击背景空白处不被关闭，keyboard:false指的是触发键盘esc事件时不关闭。
最后展示效果，无论怎么点击背景空白处，都不会有自动关闭模态框的情况：
