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

Question

我设置了一个 Bootstrap 模式，但我用通过 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;
}

要实现您想要的 - 显示滚动条 - 您可以通过指定覆盖 native css

.modal-open {
    overflow: scroll;
}

在你自己的 CSS 文件中。