Bootstrap模态框使用详解

本文实例为大家分享了Bootstrap模态框的两种使用状况,供大家参考,具体内容如下

从事服务器托管,服务器租用,云主机,网络空间,空间域名,CDN,网络代维等服务。

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


  


 
      

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

1.jsp页面


   





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模态框使用详解
本文来源:http://www.hxwzsj.com/article/jjgjdh.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 成都网站建设推广 成都网站建设 企业网站设计 网站制作 移动网站建设 成都网站建设 重庆网站制作 高端网站设计推广 成都网站设计 外贸营销网站建设 成都网站建设 达州网站设计 泸州网站建设 成都网站建设公司 成都网站制作 重庆网站建设 网站建设方案 成都网站建设 成都商城网站建设 外贸网站建设 阿坝网站设计 网站建设开发