Bootstrap 模态框的使用

Bootstrap 模态框的使用

官网中给的例子大概和我下面的一样，当点击修改时，会弹出模态框

<div class="modal fade" id="myModal"tabindex="-1" role="dialog"aria-labelledby="myModalLabel"data-backdrop="static" aria-hidden="true">

             <div class="modal-dialog">

                <div class="modal-content">

                   <div class="modal-header">

                      <button type="button" class="close"data-dismiss="modal" aria-hidden="true">&times;</button>

                         <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>

                   </div>

                       <div class="modal-body dataDiv" id="editUserDiv1">

                      <form id="modUser">

            <input type="hidden" id="userId"name="userId" />

            <input type="hidden" id="resourceNo"name="resourceNo" />

            <input type="hidden" id="deptName"name="deptName" />

            <table>

                <tr>

                   <td align="right"><label for="corpName"class="isNotNull">公司名称：</label></td>

                   <td align="left"><input type="text"id="corpName" name="corpName"disabled="disabled"/></td>

                </tr>

               <tr>

                   <td align="right"><label for="deptNo">部门名称：</label></td>

                   <td align="left"><input type="text"id="deptNo" name="deptNo"/></td>

                </tr>

                <tr>

                   <td align="right"><label for="loginId"class="isNotNull">用户昵称：</label></td>

                   <td align="left">

                      <input type="text" id="loginId"name="loginId"/>

                      <input type="hidden" id="oldLoginId"name="oldLoginId"/>

                   </td>

                </tr>

                <tr>

                   <td align="right"><label for="userName"class="isNotNull">用户姓名：</label></td>

                  <td align="left"><input type="text"id="userName" name="userName"/></td>

                </tr>

                <tr>

                   <td align="right"><label for="userCode"class="isNotNull">员工工号：</label></td>

                   <td align="left"><input type="text"id="userCode" name="userCode"disabled="disabled"/></td>

                </tr>

               

                <tr>

                   <td align="right"><label for="phone">联系电话：</label></td>

                   <td align="left"><input type="text"id="phone" name="phone"/></td>

                </tr>

                <tr>

                   <td align="right"><label for="email">邮箱：</label></td>

                   <td align="left"><input type="text"id="email" name="email"/></td>

                </tr>

            </table>

         </form> 

                   </div>

                   <div class="modal-footer">

                      <input type="submit" value="提交" onclick="editUser();"/>

                         <input type="button" class="btnbtn-default" data-dismiss="modal"value="取消"/>

                   </div>

                </div>

             </div>

         </div>

 

<input type="button" id="PO00000010"class="button_none btn btn-primary btn-lg" data-toggle="modal"data-target="#myModal" value="修改用户"οnclick="toEditU();"/>

 

js:

  functiontoEditU(obj){

   var user= fnGetSelectedRowData(oTable);

   if(user!=undefined){

      $("#myModal").modal("show");

      $("#editUserDiv1#userId").val(user.userId);

      $("#editUserDiv1#loginId").val(user.loginId);

      $("#editUserDiv1#oldLoginId").val(user.loginId);      

      $("#editUserDiv1#userName").val(user.userName);

      $("#editUserDiv1#userCode").val(user.userCode);

      $("#editUserDiv1#phone").val(user.phone);

      $("#editUserDiv1#email").val(user.email);

      $("#editUserDiv1#resourceNo").val(user.resourceNo);

      $("#editUserDiv1#corpName").val(user.corpName);

      $("#editUserDiv1#deptName").val(user.deptName);

      //如果deptNo为空字符串，就把部门号设为“”，否则就显示部门号在input框中

      if(user.deptNo==null||user.deptNo==""||user.deptNo==""){

         $("#editUserDiv1#deptNo").val("");

      }else{

         $("#editUserDiv1#deptNo").val(user.deptName+"["+user.deptNo+"]");

      }

      getDepts(Root+"/model/dept/findDeptsByCondition.do",$("#editUserDiv1#deptNo"),user.resourceNo);

      //验证修改form

      $("#modUser").validate({

         rules:{

         loginId:{required:true,minlength:5,maxlength:12,checkNotIsCN:true,checkLoginRepetition:true},

            userName:{required:true},

            deptNo:{deptNoNonentity:true},

            phone:{isPhone:true},

            email:{email:true}

         },

         submitHandler:function(form){

            editUser();

         },

         wrapper:"div",

         focusInvalid:false,

         focusCleanup:true,

         onkeyup:true

      });  

      isNotNull($("label[class='isNotNull']"));

   }

  

}

 

 

但是我希望的是，点击修改时，先到后台去判断一下，然后手动打开模态框，官网中给的方法是用show和hide,但是没有说清楚具体的用法，下面我说说我的方法：

1.先把id=" myModal "这个div的class里面加上一个：hide即：

 <div class="modal fade hide" id="myModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel"data-backdrop="static" aria-hidden="true">

2.使用show/hide，在使用之前应该去掉id=" PO00000010"这个input的: data-toggle="modal"data-target="#myModal"，即：

<input type="button" id="PO00000010"class="button_none btn btn-primary btn-lg" value="修改用户"οnclick="toEditU();"/>

这样在js中判断完成之后，加上$("#myModal").modal('show');就可以显示了。

 

注意：data-backdrop="static"这个属性的意思是：当弹出模态框后，如果点击到模态框之外的地方，模态框不会关闭（默认的值是true，会关闭）。