Bootstrap模态框使用详解


Posted in Javascript onFebruary 15, 2017

本文实例为大家分享了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>

二.还有一种就是编辑,此时在弹出模态框时,里面要写入数据,所以要先取得数据再弹出模态框。这时要加入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">×</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);

      }

    });

  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 #Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 #Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 #Javascript
Bootstrap table简单使用总结
Feb 15 #Javascript
原生js轮播(仿慕课网)
Feb 15 #Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 #Javascript
Canvas实现放射线动画效果
Feb 15 #Javascript
You might like
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
文章推荐系统(三)
2006/10/09 PHP
global.php
2006/12/09 PHP
php使用GeoIP库实例
2014/06/27 PHP
php中动态变量用法实例
2015/06/10 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
json跟xml的对比分析
2008/06/10 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
python中reader的next用法
2018/07/24 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
Python最小二乘法矩阵
2019/01/02 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
英语系毕业生求职信
2014/07/13 职场文书
2015年司法局工作总结
2015/05/22 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis