在生产中工作

Question

我有一个bootstrap v3 modal，就像文档一样。

当我第一次打开模态时（“启动演示模型”按钮），垂直滚动条处于顶部位置。如果我向下滚动并在模态中单击“取消”，它将关闭。没关系。但是，如果我再次打开模态，它将已经向下滚动。这是我想避免的情况。如何在顶部位置打开模态？

Answer 1

在生产中工作

$('#my-modal').on('shown.bs.modal', function () {
    $('#my-modal').scrollTop(0);
});

Answer 2

我认为您需要使用在打开模态时触发的事件来重置滚动。

类似的东西：

$('#myModal').on('shown.bs.modal', function () {
  window.scrollTo(0,0);
});

根据您的页面，您可能需要使用一些jQuery或动画：

$('#myModal').on('shown.bs.modal', function () {
 $('html, body').animate({
   scrollTop: $("#myModal").offset().top
 }, 1000);
});

Answer 3

我通过将焦点设置在我的模型的顶部输入元素上来接收它：

    $("#RuleDialog").on('shown.bs.modal', function() {
        $('#LinkedRuleName').focus();
    });

Answer 4

Bootstrap 3模态

$modal.off('shown.bs.modal').on('shown.bs.modal', function() {
    if ($modal.scrollTop() > 0) {
        $modal.scrollTop(0)
    }
}

Answer 5

这是我使此功能起作用的方式。首先设置显示的模态事件。

$(document).ready(function () {
    var modalMatrix = $('#modalMatrix');
    modalMatrix.on('shown.bs.modal', function () {
        modalMatrix.find('.modal-body').scrollTop(0); // This is important , for me the scrollbar is in the body of the modal .
    });
});

然后我像往常一样显示模态。

$('#modalMatrix').modal('show');

如何在bootstrap 3中重置模态的滚动位置？

5 个答案:

在生产中工作