DDR爱好者之家

Bootstrap模态框使用详解
站长资源 2025/10/26 佚名
59 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了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">&times;</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>

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

1.jsp页面

<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">&times;</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>

2.js代码

/**
 * 修改用户(将用户信息写入模态框)
 */
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);

      }

    });

  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米