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 相关文章推荐
js中onload与onunload的使用示例
Aug 25 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
理解Javascript图片预加载
Feb 23 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
js表单登陆验证示例
Oct 19 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
原生JS实现汇率转换功能代码实例
May 13 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
php 保留小数点
2009/04/21 PHP
完美解决PHP中文乱码
2009/11/26 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP中cookie知识点学习
2018/05/06 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python import与from import使用及区别介绍
2018/09/06 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python 元组和列表的区别
2020/12/30 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
《尊严》教学反思
2014/02/11 职场文书
学生手册评语
2014/05/05 职场文书
电台编导求职信
2014/05/06 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL