Detailed explanation of Bootstrap modal box
- 2021-07-21 07:05:04
- OfStack
In this paper, we share two usage conditions of Bootstrap modal box for your reference. The specific contents are as follows
1. The normal click of the modal box appears, such as adding functions
<td width="120px">
<button type="button class="btn btn-blue" style="width: 100px;"
data-toggle="modal" data-target="#systemAdd"> Add </button></td>
<!-- Added Modal Box --> </aside>
<div class="modal fade" id="systemAdd" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-blue">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title"> Add </h4>
</div>
<div class="modal-body text-center">
<form role="form-horizontal"
action="${ctx}/system/addSystemUser.xht" method="post"
id="addForm">
<div class="form-group">
<label for="name"> Users ID</label> <input type="text"
class="form-control" id="userId0" name="userId"
placeholder=" Please enter a user ID">
</div>
<div class="form-group">
<label for="name"> Password </label> <input type="text"
class="form-control" id="userPwd" name="userPwd"
placeholder=" Please enter your password ">
</div>
<div class="form-group">
<label for="name"> System ID</label> <input type="text"
class="form-control" id="systemCode" name="systemCode"
placeholder=" Please enter the system ID">
</div>
<div class="form-group">
<label for="name"> Is it an administrator </label> <select class="form-control "
id="superFlg" name="superFlg">
<option value="0"> No </option>
<option value="1"> Yes </option>
</select>
</div>
<div class="form-group">
<label for="name"> Delete flag </label> <select class="form-control "
id="delFlg" name="delFlg">
<option value="0"> Normal </option>
<option value="1"> Delete </option>
</select>
</div>
<div class="form-group">
<label for="name"> Creation date </label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder=" Please select the creation date "
data-date-format="YYYY-MM-DD HH:mm:ss" id="createTime"
name="createTime" /> <span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue" data-dismiss="modal"
onclick="addSystemUser()"> Add </button>
<button type="button" class="btn btn-default"
data-dismiss="modal"> Shut down </button>
</div>
</div>
</div>
</div>
2. There is also one kind of editing. At this time, when the modal box pops up, data should be written in it, so the data should be obtained first and then the modal box pops up. At this time, js code control should be added
1. jsp page
<td width="120px">
<button type="button "
class="btn btn-green" style="width: 100px;"
onclick="updateSystemUser()"> Modify </button></td>
<div class="modal fade" id="systemUpp" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-green">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title"> Modify </h4>
</div>
<div class="modal-body text-center">
<form role="form-horizontal"
action="${ctx}/system/updateUser.xht" method="post"
id="modifyForm">
<div class="form-group" hidden="hidden">
<label for="name">NO</label> <input type="text"
class="form-control" id="no1" name="no" readonly>
</div>
<div class="form-group" hidden="hidden">
<label for="name"> Users ID</label> <input type="text"
class="form-control" id="userId1" name="userId" readonly
placeholder=" Please enter a user ID">
</div>
<div class="form-group">
<label for="name"> User name </label> <input type="text"
class="form-control" id="userName1" name="userName"
placeholder=" Please enter a user name ">
</div>
<div class="form-group" hidden="hidden">
<label for="name"> Password </label> <input type="text"
class="form-control" id="userPwd1" name="userPwd"
placeholder=" Please enter your password ">
</div>
<div class="form-group">
<label for="name"> System ID</label> <input type="text"
class="form-control" id="systemCode1" name="systemCode"
placeholder=" Please enter the system ID">
</div>
<div class="form-group" hidden="hidden">
<label for="name"> Is it an administrator </label> <select class="form-control "
id="superFlg1" name="superFlg">
<option value="0"> No </option>
<option value="1"> Yes </option>
</select>
</div>
<div class="form-group">
<label for="name"> Delete flag </label> <select class="form-control "
id="delFlg1" name="delFlg">
<option value="0"> Normal </option>
<option value="1"> Delete </option>
</select>
</div>
<div class="form-group" hidden="hidden">
<label for="name"> Creation date </label>
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control"
data-date-format="YYYY-MM-DD HH:mm:ss" id="createTime1"
name="createTime" placeholder=" Please select the creation date " /> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-green" data-dismiss="modal"
onclick="modifySystemUser()"> Modify </button>
<button type="button" class="btn btn-default"
data-dismiss="modal"> Shut down </button>
</div>
</div>
</div>
</div>
2. js code
/**
* Modify user ( Write user information to a modal box )
*/
function updateSystemUser() {
var tempInput = new Input();
tempInput.userId = $('input[name="userId"]:checked').val();
if (tempInput.userId == null) {
alert(" Please select 1 Data to modify ");
} else {
var params = JSON2.stringify(tempInput);
var url = "/emailplatform/system/selectOneUser.xht";
ajaxJson(url, true, params, function(reObject) {
// Open modal box
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);
}
});
}
}