Bootstrap模态框使用详解

作者：袖梨 2022-06-25

本文实例为大家分享了Bootstrap模态框的两种使用状况，供大家参考，具体内容如下

一.模态框的正常点击出现，如添加功能

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">关闭

代码如下

复制代码

data-toggle="modal"data-target="#systemAdd">添加

二.还有一种就是编辑，此时在弹出模态框时，里面要写入数据，所以要先取得数据再弹出模态框。这时要加入js代码控制

1.jsp页面

aria-hidden="true">×

修改

action="${ctx}/system/updateUser.xht"method="post"

id="modifyForm">

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">关闭

代码如下

复制代码

class="btn btn-green"style="width: 100px;"

onclick="updateSystemUser()">修改

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);

}

});

}

Bootstrap模态框使用详解

相关文章

精彩推荐