bootstrap 模态框 模板 代码
<!-- 添加员工的模态框 start --> <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">×</span></button> <h4 class="modal-title" id="myModalLabel">员工添加</h4> </div> <div class="modal-body"> <!-- 员工添加表单start --> <form class="form-horizontal"> <div class="form-group"> <label for="empName_add_input" class="col-sm-2 control-label">empName</label> <div class="col-sm-10"> <input type="text" class="form-control" name="empName" id="empName_add_input" placeholder="empName"> </div> </div> <div class="form-group"> <label for="email_add_input" class="col-sm-2 control-label">email</label> <div class="col-sm-10"> <input type="email" class="form-control" name="email" id="email_add_input" placeholder="email"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class="radio col-sm-10"> <label><input type="radio" name="gender" id="gender_add_input1" value="M" checked="checked">男</label> <label><input type="radio" name="gender" id="gender_add_input2" value="F">女</label> </div> </div> <div class="form-group"> <label for="deptName_add_input" class="col-sm-2 control-label">deptName</label> <div class="col-sm-10"> <select class="form-control" id="deptName_add_input" name="deptId"> <option value="">测试部</option> <option value="">研发部</option> </select> </div> </div> </form> <!-- 员工添加表单end --> </div><!-- .modal-body结束 --> <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><!-- 添加员工的模态框 end -->
激活方式:
$("#emp_add_modal_btn").click(function(){ $('#empAddModal').modal({ backdrop:false }) });