Bootstrap模态框使用详解

<td width="120px">  <button type="button class="btn btn-blue" style="width: 100px;"data-toggle="modal" data-target="#systemAdd">添加</button></td><!-- 添加的模态框 --> </aside>      <div class="modal fade" id="systemAdd" role="dialog">        <div class="modal-dialog">          <div class="modal-content">            <div class="modal-header modal-header-blue">              <button type="button" class="close" data-dismiss="modal"                aria-hidden="true">×</button>              <h4 class="modal-title">添加</h4>            </div>            <div class="modal-body text-center">              <form role="form-horizontal"                action="${ctx}/system/addSystemUser.xht" method="post"                id="addForm">                <div class="form-group">                  <label for="name">用户ID</label> <input type="text"                    class="form-control" id="userId0" name="userId"                    placeholder="请输入用户ID">                </div>                <div class="form-group">                  <label for="name">密码</label> <input type="text"                    class="form-control" id="userPwd" name="userPwd"                    placeholder="请输入密码">                </div>                <div class="form-group">                  <label for="name">系统ID</label> <input type="text"                    class="form-control" id="systemCode" name="systemCode"                    placeholder="请输入系统ID">                </div>                <div class="form-group">                  <label for="name">是否是管理员</label> <select class="form-control "                    id="superFlg" name="superFlg">                    <option value="0">否</option>                    <option value="1">是</option>                  </select>                </div>                <div class="form-group">                  <label for="name">删除标志</label> <select class="form-control "                    id="delFlg" name="delFlg">                    <option value="0">正常</option>                    <option value="1">删除</option>                  </select>                </div>                <div class="form-group">                  <label for="name">创建日期</label>                  <div class='input-group date' id='datetimepicker1'>                    <input type='text' class="form-control" placeholder="请选择创建日期"                      data-date-format="YYYY-MM-DD HH:mm:ss" id="createTime"                      name="createTime" /> <span class="input-group-addon">                      <span class="glyphicon glyphicon-calendar"></span>                    </span>                  </div>                </div>              </form>            </div>            <div class="modal-footer">              <button type="button" class="btn btn-blue" data-dismiss="modal"                onclick="addSystemUser()">添加</button>              <button type="button" class="btn btn-default"                data-dismiss="modal">关闭</button>            </div>          </div>        </div>      </div>

<td width="120px">   <button type="button "    class="btn btn-green" style="width: 100px;"    onclick="updateSystemUser()">修改</button></td><div class="modal fade" id="systemUpp" role="dialog">        <div class="modal-dialog">          <div class="modal-content">            <div class="modal-header modal-header-green">              <button type="button" class="close" data-dismiss="modal"                aria-hidden="true">×</button>              <h4 class="modal-title">修改</h4>            </div>            <div class="modal-body text-center">              <form role="form-horizontal"                action="${ctx}/system/updateUser.xht" method="post"                id="modifyForm">                <div class="form-group" hidden="hidden">                  <label for="name">NO</label> <input type="text"                    class="form-control" id="no1" name="no" readonly>                </div>                <div class="form-group" hidden="hidden">                  <label for="name">用户ID</label> <input type="text"                    class="form-control" id="userId1" name="userId" readonly                    placeholder="请输入用户ID">                </div>                <div class="form-group">                  <label for="name">用户名</label> <input type="text"                    class="form-control" id="userName1" name="userName"                    placeholder="请输入用户名">                </div>                <div class="form-group" hidden="hidden">                  <label for="name">密码</label> <input type="text"                    class="form-control" id="userPwd1" name="userPwd"                    placeholder="请输入密码">                </div>                <div class="form-group">                  <label for="name">系统ID</label> <input type="text"                    class="form-control" id="systemCode1" name="systemCode"                    placeholder="请输入系统ID">                </div>                <div class="form-group" hidden="hidden">                  <label for="name">是否是管理员</label> <select class="form-control "                    id="superFlg1" name="superFlg">                    <option value="0">否</option>                    <option value="1">是</option>                  </select>                </div>                <div class="form-group">                  <label for="name">删除标志</label> <select class="form-control "                    id="delFlg1" name="delFlg">                    <option value="0">正常</option>                    <option value="1">删除</option>                  </select>                </div>                <div class="form-group" hidden="hidden">                  <label for="name">创建日期</label>                  <div class='input-group date' id='datetimepicker3'>                    <input type='text' class="form-control"                      data-date-format="YYYY-MM-DD HH:mm:ss" id="createTime1"                      name="createTime" placeholder="请选择创建日期" /> <span                      class="input-group-addon"> <span                      class="glyphicon glyphicon-calendar"></span>                    </span>                  </div>                </div>              </form>            </div>            <div class="modal-footer">              <button type="button" class="btn btn-green" data-dismiss="modal"                onclick="modifySystemUser()">修改</button>              <button type="button" class="btn btn-default"                data-dismiss="modal">关闭</button>            </div>          </div>        </div>      </div>

/** * 修改用户(将用户信息写入模态框) */function updateSystemUser() {  var tempInput = new Input();  tempInput.userId = $('input[name="userId"]:checked').val();  if (tempInput.userId == null) {    alert("请选择一条数据来修改");  } else {    var params = JSON2.stringify(tempInput);    var url = "/emailplatform/system/selectOneUser.xht";    ajaxJson(url, true, params, function(reObject) {      // 开启模态框      var dialog = $('#systemUpp').modal({        backdrop : 'static',        keyboard : false      });      dialog.modal('show');      if (reObject) {        $("#no1").val(reObject.data.no);        $("#userId1").val(reObject.data.userId);        $("#userName1").val(reObject.data.userName);        $("#userPwd1").val(reObject.data.userPwd);        $("#systemCode1").val(reObject.data.systemCode);        $("#superFlg1").val(reObject.data.superFlg);        $("#delFlg1").val(reObject.data.delFlg);        $("#createTime1").val(reObject.data.createTime);      }    });  }}