【发布时间】：2019-10-21 13:10:38
【问题描述】：
在代码中，用户可以点击按钮，bootbox 窗口将显示数据。有编辑按钮，如果用户单击该按钮，当前窗口应该关闭并且新的模态对话框窗口显示表单。当显示新的模态窗口时，它不能垂直滚动。这是我的代码示例：
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>如果您运行此示例，请单击“显示数据”，您将看到第一个窗口。然后，如果您单击编辑模态表单将显示在屏幕上。如果您尝试滚动，只有背景会垂直移动，但模式窗口不会移动。如果有人知道如何解决这个问题，请告诉我。
【问题讨论】：
-
当我尝试滚动时，您使用的是哪个浏览器？
-
我试过 Chrome 和 Firefox。即使在这里，如果您使用表单数据运行示例模式也不会滚动。
标签： jquery bootstrap-4 bootbox