Question

我有一个bootstrap模式，想要向下滚动按钮点击：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal"
    data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="btn btn-primary pull-right" data-dismiss="modal">
                <i class="fa fa-times"></i><span class="hidden-xs">Close</span></button>
            <button id="refresh" type="button" class="btn btn-primary pull-right">
                <i class="fa fa-refresh"></i><span class="hidden-xs"> Refresh</span></button>
            <h4 class="modal-title"> myTitle</h4>
        </div>
        <div class="modal-body">
            <p id="verylongtext">Here is a very long text</p>
            <p class="hidden" id="modal-bottom"></p>
        </div>
    </div>
</div>

JavaScript的：

$('#refresh').click(function() {
$("#modal-dialog").animate({
        scrollTop: $("#modal-bottom").offset().top
    }, 1000);
});

到目前为止，这是我的bootply。我尝试了几种不同的方法，但我没有让它发挥作用。

编辑：我更新了代码段和bootply，但它仍无法正常工作......

Answer 1

所以我玩了它，你错过了你的模态标题的初始div的东西。我通过从Bootstrap文档中复制模态的标记并使用按钮打开它来解决这个问题，这使得模式可以平滑滚动。我更换了第一行，因为我发现物品丢失了，这就是问题所在。物品的订单可能也很重要，因为我将它们添加到各个地方，但仍无法使其发挥作用。

将此作为模态的第一行：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

此处它以 Bootply 运行。

Bootstrap Modal Scrolldown

1 个答案: