Bootstrap模态框使用详解
本文实例为大家分享了Bootstrap模态框的两种使用状况，供大家参考，具体内容如下
一.模态框的正常点击出现，如添加功能
| 代码如下 | 复制代码 |
|
data-toggle="modal"data-target="#systemAdd">添加 |
|
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">关闭
二.还有一种就是编辑，此时在弹出模态框时，里面要写入数据，所以要先取得数据再弹出模态框。这时要加入js代码控制
1.jsp页面
| 代码如下 | 复制代码 |
|
class="btn btn-green"style="width: 100px;" onclick="updateSystemUser()">修改 |
|
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">关闭
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);
}
});
} } |
|
