Bootstrap模态框使用详解

发布时间：2020-12-18 00:41:20 所属栏目：安全来源：网络整理

导读：本文实例为大家分享了Bootstrap模态框的两种使用状况，供大家参考，具体内容如下一.模态框的正常点击出现，如添加功能 div class="modal fade" id="systemAdd" role="dialog"gt; div class="modal-dialog"gt; div class="modal-content"gt; div class="moda

本文实例为大家分享了Bootstrap模态框的两种使用状况，供大家参考，具体内容如下

一.模态框的正常点击出现，如添加功能

  <div class="modal fade" id="systemAdd" role="dialog"&gt;
    <div class="modal-dialog"&gt;
      <div class="modal-content"&gt;
        <div class="modal-header modal-header-blue"&gt;
          <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true"&gt;&times;</button>
          <h4 class="modal-title"&gt;添加</h4>
        </div>
        <div class="modal-body text-center"&gt;
          <form role="form-horizontal"
            action="${ctx}/system/addSystemUser.xht" method="post"
            id="addForm"&gt;

            <div class="form-group"&gt;
              <label for="name"&gt;用户ID</label> <input type="text"
                class="form-control" id="userId0" name="userId"
                placeholder="请输入用户ID"&gt;
            </div>

            <div class="form-group"&gt;
              <label for="name"&gt;密码</label> <input type="text"
                class="form-control" id="userPwd" name="userPwd"
                placeholder="请输入密码"&gt;
            </div>
            <div class="form-group"&gt;
              <label for="name"&gt;系统ID</label> <input type="text"
                class="form-control" id="systemCode" name="systemCode"
                placeholder="请输入系统ID"&gt;
            </div>
            <div class="form-group"&gt;
              <label for="name"&gt;是否是管理员</label> <select class="form-control "
                id="superFlg" name="superFlg"&gt;
                <option value="0"&gt;否</option>
                <option value="1"&gt;是</option>

              </select>
            </div>
            <div class="form-group"&gt;
              <label for="name"&gt;删除标志</label> <select class="form-control "
                id="delFlg" name="delFlg"&gt;
                <option value="0"&gt;正常</option>
                <option value="1"&gt;删除</option>

              </select>
            </div>
            <div class="form-group"&gt;
              <label for="name"&gt;创建日期</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"&gt;
                  <span class="glyphicon glyphicon-calendar"&gt;</span>
                </span>
              </div>
            </div>

          </form>
        </div>
        <div class="modal-footer"&gt;
          <button type="button" class="btn btn-blue" data-dismiss="modal"
            onclick="addSystemUser()"&gt;添加</button>
          <button type="button" class="btn btn-default"
            data-dismiss="modal"&gt;关闭</button>
        </div>
      </div>
    </div>
  </div>

二.还有一种就是编辑，此时在弹出模态框时，里面要写入数据，所以要先取得数据再弹出模态框。这时要加入js代码控制

1.jsp页面

<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">×
<h4 class="modal-title">修改