CRUD（20）：新增-创建新增的模态框

一、新增的逻辑

①在index.jsp页面点击新增；
②弹出新增对话框；
③去数据库查询部门列表，显示在对话框中；
④用户输入数据完成保存。

二、制作对话框

BootStrap官网模态框说明

①加入modal的js代码

<!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div></div>

②给modal以及新增按钮命名一个id

       <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"

             aria-labelledby="myModalLabel">

<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>

③绑定事件

             //模态框绑定事件

             $("#emp_add_modal_btn").click(function(){

                    $("#empAddModal").modal({

                           backdrop:"static"

                    });

             });

             

④写模态框的具体样式

       <!-- Modal -->

       <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"

             aria-labelledby="myModalLabel">

             <div class="modal-dialog" role="document">

                    <div class="modal-content">

                           <div class="modal-header">

                                 <button type="button" class="close" 
data-dismiss="modal"

                                        aria-label="Close">

                                        <span aria-hidden="true">&times;</span>

                                 </button>

                                 <h4 class="modal-title" id="myModalLabel">新增员工</h4>

                           </div>

                           <div class="modal-body">

                                 <form class="form-horizontal">

                                        <div class="form-group">

                                               <label for="empName_add_input" 
<u>name</u>="empName"

                                                     class="col-sm-2 
control-label">empName</label>

                                               <div class="col-sm-10">

                                                     <input type="text" 
class="form-control" id="empName_add_input"

                                                            placeholder="empName">

                                               </div>

                                        </div>

                                        <div class="form-group">

                                               <label for="email_add_input" 
<u>name</u>="email"

                                                     class="col-sm-2 
control-label">email</label>

                                               <div class="col-sm-10">

                                                     <input type="text" 
class="form-control" id="email_add_input"

                                                            placeholder="hello123@qq.com">

                                               </div>

                                        </div>



                                        <div class="form-group">

                                               <label for="gender_add_input" 
class="col-sm-2 control-label">性别</label>

                                               <div class="col-sm-10">

                                                     <label 
class="radio-inline"> <input type="radio"

                                                            name="gender" 
id="gender1_add_input" value="m"

                                                            checked="checked"> 
男

                                                     </label> <label 
class="radio-inline"> <input type="radio"

                                                            name="gender" 
id="gender1_add_input" value="f"> 女

                                                     </label>

                                               </div>

                                        </div>



                                        <div class="form-group">

                                               <label class="col-sm-2 
control-label">deptName</label>

                                               <div class="col-sm-4">

                                                     <!-- 部门提交部门ID即可 -->

                                                     <select 
class="form-control" name="dId">

                                                            <option value="1">开发部</option>

                                                            <option value="2">测试部</option>

                                                     </select>

                                               </div>

                                        </div>

                                 </form>

                           </div>

                           <div class="modal-footer">

                                 <button type="button" class="btn btn-default" 
data-dismiss="modal">关闭</button>

                                 <button type="button" class="btn 
btn-primary">保存</button>

                           </div>

                    </div>

             </div>

       </div>