引导对话框对话框无法垂直滚动？

Question

代码中的

用户能够单击按钮，并且引导箱窗口将显示数据。有一个编辑按钮，如果用户单击该按钮，则当前窗口应关闭，新的模式对话框窗口将显示表单。显示新的模式窗口时，无法垂直滚动。这是我的代码示例：

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">&times;</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>

如果运行此示例，请单击“显示数据”，您将看到第一个窗口。然后，如果单击“编辑”，模态表单将显示在屏幕上。如果尝试滚动，则背景只会垂直移动，而模态窗口不会移动。如果有人知道如何解决该问题，请告诉我。

Answer 1

这里的问题是，当您使用方法$("#dialog-box").modal("hide");隐藏第一个模态时，也会将.modal-open删除到body标签中

该类在overflow-y: auto;元素中添加一个.modal-open .modal。

一种解决方案可能是使用Modal's event在hide事件结束时强制添加该类：

$("#dialog-box").on('hidden.bs.modal', function (e) {
    $("body").addClass("modal-open");
})

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])) {
    $("#dialog-box").on('hidden.bs.modal', function (e) {
      $("body").addClass("modal-open");
    });

    $("#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">&times;</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>