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">×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>
"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"，即：
"button" id="PO00000010"class="button_none btn btn-primary btn-lg" value="修改用户"οnclick="toEditU();"/>
这样在js中判断完成之后，加上$("#myModal").modal('show');就可以显示了。
注意：data-backdrop="static"这个属性的意思是：当弹出模态框后，如果点击到模态框之外的地方，模态框不会关闭（默认的值是true，会关闭）。