Bootstrap模态框案例解析


Posted in Javascript onMarch 05, 2017

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

<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);
   }
  });
 }
}

以上所述是小编给大家介绍的Bootstrap模态框案例解析,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
jquery退出each循环的写法
Feb 26 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
js使用心得分享
Jan 13 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
js实现简易聊天对话框
Aug 17 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
video.js使用改变ui过程
Mar 05 #Javascript
Angular开发者指南之入门介绍
Mar 05 #Javascript
JavaScript自定义文本框光标
Mar 05 #Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 #Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 #Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 #Javascript
详解vue父子模版嵌套案例
Mar 04 #Javascript
You might like
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP7匿名类用法分析
2016/09/26 PHP
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
javascript时间差插件分享
2016/07/18 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python中self原理实例分析
2015/04/30 Python
python数据结构之链表详解
2017/09/12 Python
基于python实现名片管理系统
2018/11/30 Python
详解python持久化文件读写
2019/04/06 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
年度考核自我评价
2014/01/25 职场文书
酒店总经理助理职责
2014/02/12 职场文书
小学毕业演讲稿
2014/04/25 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
岗位职责范本大全
2015/02/26 职场文书
数学教师求职信范文
2015/03/20 职场文书
交通安全温馨提示语
2015/07/14 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技