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">×</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，會關閉）。
