bootstrap踩坑-简单复制粘贴修改出bug花时间

在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">&times;</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>

 

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments