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刷新框架子页面的七种方法代码
Nov 20 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php中序列化与反序列化详解
2017/02/13 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue的全局提示框组件实例代码
2018/02/26 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
中学生励志演讲稿
2014/04/26 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
财务部会计岗位职责
2015/02/03 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS