Bootstrap模态框使用详解
本文实例为大家分享了Bootstrap模态框的两种使用状况，供大家参考，具体内容如下
一.模态框的正常点击出现，如添加功能
<tdwidth="120px">
<buttontype="buttonclass="btnbtn-blue"style="width:100px;"
data-toggle="modal"data-target="#systemAdd">添加</button></td>
<!--添加的模态框--></aside>
<divclass="modalfade"id="systemAdd"role="dialog">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-headermodal-header-blue">
<buttontype="button"class="close"data-dismiss="modal"
aria-hidden="true">×</button>
<h4class="modal-title">添加</h4>
</div>
<divclass="modal-bodytext-center">
<formrole="form-horizontal"
action="${ctx}/system/addSystemUser.xht"method="post"
id="addForm">
<divclass="form-group">
<labelfor="name">用户ID</label><inputtype="text"
class="form-control"id="userId0"name="userId"
placeholder="请输入用户ID">
</div>
<divclass="form-group">
<labelfor="name">密码</label><inputtype="text"
class="form-control"id="userPwd"name="userPwd"
placeholder="请输入密码">
</div>
<divclass="form-group">
<labelfor="name">系统ID</label><inputtype="text"
class="form-control"id="systemCode"name="systemCode"
placeholder="请输入系统ID">
</div>
<divclass="form-group">
<labelfor="name">是否是管理员</label><selectclass="form-control"
id="superFlg"name="superFlg">
<optionvalue="0">否</option>
<optionvalue="1">是</option>
</select>
</div>
<divclass="form-group">
<labelfor="name">删除标志</label><selectclass="form-control"
id="delFlg"name="delFlg">
<optionvalue="0">正常</option>
<optionvalue="1">删除</option>
</select>
</div>
<divclass="form-group">
<labelfor="name">创建日期</label>
<divclass='input-groupdate'id='datetimepicker1'>
<inputtype='text'class="form-control"placeholder="请选择创建日期"
data-date-format="YYYY-MM-DDHH:mm:ss"id="createTime"
name="createTime"/><spanclass="input-group-addon">
<spanclass="glyphiconglyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-blue"data-dismiss="modal"
onclick="addSystemUser()">添加</button>
<buttontype="button"class="btnbtn-default"
data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
二.还有一种就是编辑，此时在弹出模态框时，里面要写入数据，所以要先取得数据再弹出模态框。这时要加入js代码控制
1.jsp页面
<tdwidth="120px">
<buttontype="button"
class="btnbtn-green"style="width:100px;"
onclick="updateSystemUser()">修改</button></td>
<divclass="modalfade"id="systemUpp"role="dialog">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-headermodal-header-green">
<buttontype="button"class="close"data-dismiss="modal"
aria-hidden="true">×</button>
<h4class="modal-title">修改</h4>
</div>
<divclass="modal-bodytext-center">
<formrole="form-horizontal"
action="${ctx}/system/updateUser.xht"method="post"
id="modifyForm">
<divclass="form-group"hidden="hidden">
<labelfor="name">NO</label><inputtype="text"
class="form-control"id="no1"name="no"readonly>
</div>
<divclass="form-group"hidden="hidden">
<labelfor="name">用户ID</label><inputtype="text"
class="form-control"id="userId1"name="userId"readonly
placeholder="请输入用户ID">
</div>
<divclass="form-group">
<labelfor="name">用户名</label><inputtype="text"
class="form-control"id="userName1"name="userName"
placeholder="请输入用户名">
</div>
<divclass="form-group"hidden="hidden">
<labelfor="name">密码</label><inputtype="text"
class="form-control"id="userPwd1"name="userPwd"
placeholder="请输入密码">
</div>
<divclass="form-group">
<labelfor="name">系统ID</label><inputtype="text"
class="form-control"id="systemCode1"name="systemCode"
placeholder="请输入系统ID">
</div>
<divclass="form-group"hidden="hidden">
<labelfor="name">是否是管理员</label><selectclass="form-control"
id="superFlg1"name="superFlg">
<optionvalue="0">否</option>
<optionvalue="1">是</option>
</select>
</div>
<divclass="form-group">
<labelfor="name">删除标志</label><selectclass="form-control"
id="delFlg1"name="delFlg">
<optionvalue="0">正常</option>
<optionvalue="1">删除</option>
</select>
</div>
<divclass="form-group"hidden="hidden">
<labelfor="name">创建日期</label>
<divclass='input-groupdate'id='datetimepicker3'>
<inputtype='text'class="form-control"
data-date-format="YYYY-MM-DDHH:mm:ss"id="createTime1"
name="createTime"placeholder="请选择创建日期"/><span
class="input-group-addon"><span
class="glyphiconglyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-green"data-dismiss="modal"
onclick="modifySystemUser()">修改</button>
<buttontype="button"class="btnbtn-default"
data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
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);
}
});
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。