Bootstrap模态框使用详解

作者：袖梨 2022-06-25

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

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

 

      

        

          

            

              

                aria-hidden="true">×

              添加

            

            

              

                action="${ctx}/system/addSystemUser.xht"method="post"

                id="addForm">

 

                

                  用户ID

                    class="form-control"id="userId0"name="userId"

                    placeholder="请输入用户ID">

                

 

                

                  密码

                    class="form-control"id="userPwd"name="userPwd"

                    placeholder="请输入密码">

                

                

                  系统ID

                    class="form-control"id="systemCode"name="systemCode"

                    placeholder="请输入系统ID">

                

                

                  是否是管理员

                    id="superFlg"name="superFlg">

                    否

                    是

 

                  

                

                

                  删除标志

                    id="delFlg"name="delFlg">

                    正常

                    删除

 

                  

                

                

                  创建日期

                  

 

                    

                      data-date-format="YYYY-MM-DD HH:mm:ss"id="createTime"

                      name="createTime"/>

                      

                    

                  

                

 

              

            

            

              

                onclick="addSystemUser()">添加

              

                data-dismiss="modal">关闭

            

          

        

      

 代码如下 复制代码

  

data-toggle="modal"data-target="#systemAdd">添加

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

1.jsp页面

        

          

            

              

                aria-hidden="true">×

              修改

            

            

              

                action="${ctx}/system/updateUser.xht"method="post"

                id="modifyForm">

                

                  NO

                    class="form-control"id="no1"name="no"readonly>

                

                

                  用户ID

                    class="form-control"id="userId1"name="userId"readonly

                    placeholder="请输入用户ID">

                

                

                  用户名

                    class="form-control"id="userName1"name="userName"

                    placeholder="请输入用户名">

                

                

                  密码

                    class="form-control"id="userPwd1"name="userPwd"

                    placeholder="请输入密码">

                

                

                  系统ID

                    class="form-control"id="systemCode1"name="systemCode"

                    placeholder="请输入系统ID">

                

                

                  是否是管理员

                    id="superFlg1"name="superFlg">

                    否

                    是

 

                  

                

                

                  删除标志

                    id="delFlg1"name="delFlg">

                    正常

                    删除

 

                  

                

                

                  创建日期

                  

                    

                      data-date-format="YYYY-MM-DD HH:mm:ss"id="createTime1"

                      name="createTime"placeholder="请选择创建日期"/>

                      class="input-group-addon">

                      class="glyphicon glyphicon-calendar">

                    

                  

                

              

            

            

              

                onclick="modifySystemUser()">修改

              

                data-dismiss="modal">关闭

            

          

        

      

 代码如下 复制代码

   

    class="btn btn-green"style="width: 100px;"

    onclick="updateSystemUser()">修改

2.js代码

 代码如下 复制代码

/**

 * 修改用户(将用户信息写入模态框)

 */

functionupdateSystemUser() {

 

  vartempInput =newInput();

  tempInput.userId = $('input[name="userId"]:checked').val();

  if(tempInput.userId ==null) {

    alert("请选择一条数据来修改");

  }else{

 

    varparams = JSON2.stringify(tempInput);

    varurl ="/emailplatform/system/selectOneUser.xht";

    ajaxJson(url,true, params,function(reObject) {

 

      // 开启模态框

      vardialog = $('#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);

 

      }

 

    });

 

  }

}

相关文章

精彩推荐