使用 jQuery 打开时，Bootstrap Modal 不可滚动

Question

我有一个引导模式设置，但我用通过 jQuery ajax 函数检索的数据填充它。如果使用以下代码打开模态，则它可以正常打开，并且可以滚动。

<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#editContact"><i class="fa fa-pencil"></i></button> 

但是，当我用数据填充它时，我调用了一个 JavaScript 函数来执行 ajax 调用，并用数据填充它。该函数在按钮单击时调用，如下所示：

<button type="button" class="btn btn-warning btn-xs" onclick="open_contact(2);"><i class="fa fa-pencil"></i></button> 

它调用以下 JavaScript 函数：

function open_contact(id)
{
    $.post("contacts/get",
    {
        // Posts relevant details to show the right content
    },
    function(data, status) {
        // Code here to check for valid response etc
        $('#editContact').modal('show');
    });
}

这个 JavaScript 工作正常 - 它不会抛出任何错误并且可以很好地检索数据。它还打开模态罚款。但是，当使用 JavaScript 而不是使用第一个按钮（使用数据目标）打开模态时，整个浏览器窗口都会滚动，而不仅仅是模态。

作为参考，模态打开标签：

<div class="modal fade" id="editContact" tabindex="-1" role="dialog" aria-labelledby="editContact" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

请问有人有什么建议吗？

编辑

我应该澄清一下，我的问题不在于我没有滚动条。我遇到的问题是，例如，当我使用鼠标滚轮滚动时，模态后面的页面会滚动，但模态不会移动。因此，在模态中隐藏的任何文本都不会出现。

Answer 1

我认为对您问题的评论是正确的，不显示滚动条是预期的行为。

当您显示模式时，类modal-open会添加到 HTML 中，而当您隐藏它时，类会被删除。body

这使得滚动条消失，因为 bootstrap css 说

.modal-open {
    overflow: hidden;
}

为了实现你想要的 - 显示滚动条 - 你可以通过指定覆盖本机CSS

.modal-open {
    overflow: scroll;
}

在你自己的 css 文件中。