javascript - 模态背景滚动中的 Bootstrap 模态

Question

我有一个内容很长的模式和一个打开另一个模式的按钮。当我关闭内部模态时，外部模态被卡住了。它无法滚动，而是背景开始滚动。

我发现了一些与模态和滚动相关的问题，例如 bootstrap modal inside a modal和 Prevent BODY from scrolling when a modal is opened ，但我的问题似乎并未在此处复制。

我 fork 了一个 fiddle来自 Bootstrap 3: prevent modal inside modal to trigger (hidden.bs.modal) every time来论证这个问题。从第二个模态点击取消后，第一个模态卡住了。

代码:

$('#btnUploadCancel').click(function() {
  $('#uploadImage').modal('toggle');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<p>
  Lorem ipsum .... long content
</p>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Demo Modal</h4>
      </div>
      <div class="modal-body">
        <p>
          <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a>
        </p>
        Lorem ipsum ... long content
        <p>

        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  <div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="uploadImage-title">Upload new image</h4>
        </div>
        <div class="modal-body">
          Testing Area
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
          <button type="button" class="btn btn-success">Accept</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

编辑您的 javascript 以像这样打开第一个模式 -

    $('#btnUploadCancel').click(function () {
    $('#uploadImage').modal('toggle');

    $('body').addClass('modal-open');
});