в коде пользователь может нажать на кнопку, и в окне начальной загрузки отобразятся данные. Есть кнопка редактирования, и если пользователь нажимает на эту кнопку, текущее окно должно закрыться, и новое модальное диалоговое окно отображает форму. Когда отображается новое модальное окно, его нельзя прокручивать по вертикали. Вот пример моего кода:
var data = {
1: {
"recid": 1,
"name": "John Holmes",
"age": 48,
"title": "Manager"
},
2: {
"recid": 2,
"name": "Jackie Troy",
"age": 45,
"title": "Engineer"
},
3: {
"recid": 3,
"name": "Mike Cook",
"age": 28,
"title": "Secretary"
},
4: {
"recid": 4,
"name": "Roy Thomson",
"age": 56,
"title": "HR Coordinator"
},
5: {
"recid": 5,
"name": "Ana Olsen",
"age": 23,
"title": "Lead Developer"
}
};
function dialogBox(title, message, size) {
title = title || 'HCS System';
message = message || 'HCS Dialog Box';
size = size || 'lg';
var dialog = bootbox.dialog({
onEscape: true,
size: size,
title: '<strong>' + title + '</strong>',
message: message
});
dialog.prop("id", "dialog-box");
};
$("#show-data").on("click", function() {
var dialogTitle = "Data History",
table = $('<table>').addClass('table'),
thead = $('<thead><tr><th>Name</th><th>Age</th><th>Title</th></tr></thead>'),
tbody = $('<tbody>');
if ($.isEmptyObject(data)) {
var tr = $('<tr><td colspan="3">No records were found.</td></tr>');
tbody.append(tr);
} else {
for (key in data) {
var tr = $('<tr>').prop('id', 'row_' + key);
tbody.append(tr);
tr.append($('<td>').text(data[key].name ? data[key].name : "N/A"));
tr.append($('<td>').text(data[key].age ? data[key].age : "N/A"));
tr.append($('<td>').text(data[key].title ? data[key].title : "N/A"));
tr.append($('<td><button type="button" class="btn btn-sm btn-secondary edit-data" data-recid="' + key + '">Edit</button></td>'));
}
}
table.append(thead);
table.append(tbody);
dialogBox(dialogTitle, table, "xl");
});
$(document).on("click", ".edit-data", function() {
$("#dialog-box").modal("hide");
var recID = $(this).data("recid");
if (!$.isEmptyObject(data[recID])) {
$("#frm_name").val(data[recID].name);
$("#frm_age").val(data[recID].age);
$("#frm_title").val(data[recID].title);
$("#frm_modal").modal("show");
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.3.2/bootbox.min.js"></script>
<button class="btn btn-sm btn-secondary" type="button" id="show-data">Show Data</button>
<div class="modal fade" id="frm_modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form class="frm-data" name="data_frm" id="data_frm" autocomplete="off">
<div class="form-group">
<label class="font-weight-bold" for="frm_name">Name:</label>
<div class="input-group">
<input class="form-control" type="text" name="frm_name" id="frm_name" placeholder="Enter Name" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label class="font-weight-bold" for="frm_age">Age:</label>
<div class="input-group">
<input class="form-control" type="text" name="frm_age" id="frm_age" placeholder="Enter Age" maxlength="2" required>
</div>
</div>
<div class="form-group">
<label class="font-weight-bold" for="frm_title">Title:</label>
<div class="input-group">
<input class="form-control" type="text" name="frm_title" id="frm_title" placeholder="Enter Title" maxlength="100" required>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary review-apply" data-modal="er_modal" data-update-option="">Apply</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Если вы запустите этот пример, нажмите Показать данные, и вы увидите первое окно. Затем, если вы нажмете на Изменить, модальная форма отобразится на экране. Если вы попытаетесь прокрутить, только фон будет двигаться вертикально, но модальное окно не будет двигаться. Если кто-нибудь знает, как это исправить, пожалуйста, дайте мне знать.