打开模态时，背景滚动条消失了

Question

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

CSS

```css body.modal-open { overflow: hidden; } ```

将上述代码更改为以下内容即可使背景可滚动：

```css body.modal-open { overflow: auto; } ```

#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/

- RGriffiths

Answer 1

每次模态框打开时，类.modal-open会被添加到body标签中，该类包含overflow:hidden。

可以通过添加以下内容来解决此问题：

.modal-open {
  overflow: inherit;
}

现在，你会发现打开模态窗口会突然滚动到底部；这也是为什么按钮在每次点击后消失的原因...

你可能需要进一步尝试来防止滚动发生，因为显示为模态窗口之前div或其中的某些内容可能会获得焦点。

- Peter B

---

很好。有趣的是，在代码片段中可以滚动，但在我的实际网站上，文字显示在一个框架中却不能滚动。我会进一步调查，不过这让我有了个开始 - 谢谢。 - RGriffiths

Answer 2

这个修复方案可以解决所有问题，但我不确定它是否适用于你的情况。你的模态框应该是相对定位吗？因为默认情况下，为了使其正常工作，模态框是固定的。这会防止自动滚动到底部。

https://jsfiddle.net/3c09qkag/12/

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

.modal-open {
  overflow: inherit;
}

- Crocsx