在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>