Bootstrap模态框使用详解

本文实例为大家分享了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;<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a></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;<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>ID</label> <input type="text"
                class="form-control" id="userId0" name="userId"
                placeholder="请输入<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>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;是否是<a href="https://www.jb51.cc/tag/guanliyuan/" target="_blank" class="keywords">管理员</a></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;<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>标志</label> <select class="form-control "
                id="delFlg" name="delFlg"&gt;
                <option value="0"&gt;正常</option>
                <option value="1"&gt;<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a></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;<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a></button>
          <button type="button" class="btn btn-default"
            data-dismiss="modal"&gt;<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a></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">修改

用户名用户名">

管理员