Bootstrap模态框使用详解-泸州大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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.lzwzjz.cn/article/jjgjdh.html

新闻中心

其他资讯