Bootstrap模态框使用详解

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

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

  添加


 
      

        

          

            

              ×
              
添加
            
            

              


                

                  用户ID 
                

                

                  密码 
                
                

                  系统ID 
                
                

                  是否是管理员 
                    否
                    是

                  
                
                

                  删除标志 
                    正常
                    删除

                  
                
                

                  创建日期
                  


                     
                      
                    
                  
                

              
            
            

              添加
              关闭
            
          
        
      

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

1.jsp页面

   修改




        

          

            

              ×
              
修改
            
            

              

                
                
                

                  用户名 
                
                
                

                  系统ID 
                
                
                

                  删除标志 
                    正常
                    删除

                  
                
                
              
            
            

              修改
              关闭
            
          
        
      

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);

      }

    });

  }
}

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