Bootstrap模态框使用详解

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

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

  添加


 
      
 
   
     
×
添加
     
     

     
     
添加
关闭
     
   
 
      

二.还有一种就是编辑，此时在弹出模态框时，里面要写入数据，所以要先取得数据再弹出模态框。这时要加入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);

      }

    });

  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。