在bootstrap中 ,新建了一个模态框表格:
知道显示模态框需要:
$("#empUpdateModal").modal({
backdrop:"static"
});
但是忘记了,点击提交按钮时,需要自己关闭模态框:
//点击更新,更新员工信息
$("#emp_update_done_btn").click(function(){
//1、员工修改成功,需要关闭模态框。
//下面这句话,之前一直忘记添加了,所以一直不知道为什么提交了,却不自动关闭模态框。思考并找了很长时间,对框架执行不熟悉
$("#empUpdateModal").modal("hide");
}
新建的模态框表格如下:
<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">员工修改</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label class="col-sm-3 col-form-label">empName</label>
<div class="col-sm-9">
<input type="text" readonly class="form-control-plaintext" id="empName_update_input_disable" name="empName" value="none">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="email_update_input" name="email" placeholder="[email protected]">
<div class="invalid-feedback"> 邮箱输入错误。</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">gender</label>
<div class="col-sm-9">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender1_update_input" checked value="M">
<label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender2_update_input" value="F">
<label class="form-check-label" >女</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">departName</label>
<div class="col-sm-6">
<!-- 部门提交部门id即可 -->
<select class="custom-select my-1 mr-sm-2" name="dId" id="dept_update_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_update_done_btn">更新</button>
</div>
</div>
</div>
</div>