Bootstrap模态框使用详解

Bootstrap模态框使用详解

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

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

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

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

aria-hidden="true">×

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="superFlg" name="superFlg">

否

是

删除标志

id="delFlg" name="delFlg">

正常

删除

id="delFlg" name="delFlg">

正常

删除

创建日期

data-date-format="YYYY-MM-DD HH:mm:ss" id="createTime"

name="createTime" />

onclick="addSystemUser()">添加

onclick="addSystemUser()">添加

data-dismiss="modal">关闭

data-dismiss="modal">关闭

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

1.jsp页面

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

onclick="updateSystemUser()">修改

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

onclick="updateSystemUser()">修改

aria-hidden="true">×

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="superFlg1" name="superFlg">

否

是

删除标志

id="delFlg1" name="delFlg">

正常

删除

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

class="input-group-addon">

class="glyphicon glyphicon-calendar">

class="glyphicon glyphicon-calendar">

onclick="modifySystemUser()">修改

onclick="modifySystemUser()">修改

data-dismiss="modal">关闭

data-dismiss="modal">关闭

2.js代码

/**

* 修改用户(将用户信息写入模态框)

*/

function updateSystemUser() {

var tempInput = new Input();

tempInput.userId = $('inpyOdfBut[name="userId"]:checked').val();

if (tempInput.userId == null) {

alert("请选择一条数据来修改");

} else {

var params = JSON2.stringify(tempInput);

var url = "/emailplatform/system/selectOneUser.xht";

ajaxJson(url, true, params, function(reObject) {

// 开启模态框

var dialog = $('#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);

}

});

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。