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;
}

要实现您想要的效果 - 显示滚动条 - 您可以通过指定

来覆盖原生css

.modal-open {
    overflow: scroll;
}

在您自己的css文件中。

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

1 个答案: