jquery - 打开模式时背景滚动条消失

Question

我有一个页面，其中有一个 float 的、可拖动的模式，允许我在模式打开时访问背景。除了背景中的垂直滚动条消失之外，以下各方面都有效。如何保持背景可滚动？

CSS

#myModal {
  position: relative;
}

.modal-dialog {
  position: fixed;
  width: 50%;
  margin: 0;
  padding: 10px;
}

HTML

<button id="openModal">Show Modal</button>
... lines of text ...

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Draggable Modal</h4>
      </div>
      <div class="modal-body">
        Modal Body
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

脚本

$('#openModal').click(function() {
  if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
      top: 0,
      left: 0
    });
  }
  $('#myModal').modal({
    backdrop: false,
    show: true
  });

  $('.modal-dialog').draggable({
    handle: ".modal-header"
  });
});

https://jsfiddle.net/3c09qkag/

Answer 1

每次打开 Modal 时，.modal-open 类都会添加到 body 标记中 - 并且该类包含 overflow:hidden。

可以通过添加以下内容来修复此问题:

.modal-open {
  overflow: inherit;
}

现在你会发现打开Modal会突然导致滚动到底部；这也是为什么每次点击按钮都会从 View 中消失......

您可能需要进一步进行实验以防止滚动发生，这可能是因为 div 或其中的某些内容在显示为模态之前获得焦点。