11

单击触发 Twitter Bootstrap 模式弹出的链接会导致浏览器向上滚动页面。此行为仅在 Chrome 中发生。

这是一个演示页面：

http://www.turizmburosu.com/test2.aspx

页面有 600 行链接，导致页面正文超出窗口高度。如果单击这些链接中的任何一个，它将显示模式对话框。在 Chrome 中，单击初始视图下方的任何链接都会导致背景页面向上滚动（并不总是完全滚动到顶部）。

我使用以下函数来触发模态的显示：

function test(id, imp) {
    $("#modalLabel").html("Header");
    $("#modalBody").html("Body");
    $("#myModal").modal("show");
}

链接的形式为：

<a href="" onclick="test();return false;">Test Link ###</a>

我在Chrome 22.0.1229.94 m中看到了这种行为。

关于为什么会发生这种情况以及如何防止它的任何建议/想法？

附加示例

这可以在 Modal 插件的 Twitter Bootstrap 文档页面上重新创建。

进入页面后，只需覆盖现有的 data-api 即可改用 JavaScript api：

$('#modals a[data-toggle="modal"]').on('click',
  function(e) {
    $('#myModal').modal('toggle');
    return false
  });

现在，如果单击Launch Demo Modal按钮，则在显示模式时页面将向上滚动。

同样，这是使用 Chrome。

4

6 回答 6

18

已修复（2012 年 10 月 29 日）

自 Bootstrap v2.2.0 以来，此问题已得到修复。有关详细信息，请参阅提交 e24b46...。

（原答案）

这是由于 Twitter Bootstrap 模式（从 2.1.1 开始）实现中的一个错误。问题的根源在于焦点在模态完成转换之前被设置为模态。这只会在以下条件下发生

  1. 浏览器支持 CSS 过渡（并且您正在使用bootstrap-transition.js）；
  2. 模态有类fade；和
  3. 当焦点设置到当前视图之外的元素时，浏览器将滚动以将其移动到视图中（例如，Chrome、Safari）。

应该注意的是，这会影响 Data API（基于标记）和 Programmatic API（基于 JS）。但是，采用编程方法时它更明显的原因是，与 Data API 不同，它不会自动将焦点恢复到触发元素，因此，当模式隐藏时不会向下滚动视图。

更多信息可在 Twitter Bootstrap 存储库中的Issue #5336: Modal Scrolls Background Content下找到。

一个修复程序已合并到2.1.2-wip分支中，现在应该可以随时发布。

这是使用补丁bootstrap-modal.js的演示：

JSFiddle

于 2012-10-19T12:54:18.687 回答
5

同样的问题。它是由“#”引起的，并且锚点正在滚动。我通过删除锚标签来解决这个问题并将其放置：

<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>
于 2015-05-20T20:55:05.817 回答
1

我在我的网站上遇到了类似的问题，这是由另一个 jquery 插件（sidr）引起的。当侧边栏出现并且我打开一个模式窗口时，我将被送回顶部。

在 jquery.sidr.js 中，我将第 102-106 行从：

// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

至：

// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

如果您将此插件与 twitter bootstrap 的模态一起使用，也许这可以帮助您。

于 2014-03-06T08:12:20.217 回答
0

将焦点重新拉近

var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
    triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
     var animationTime=1;
    $('html, body').animate({
        scrollTop: (triggerOffset)
    }, animationTime);
});
于 2016-05-23T04:19:41.593 回答
0

我遇到了同样的问题，因为这些 CSS 行被认为会在浏览器中永久显示滚动条。删除这两行解决了问题：

html,
body {
    min-height: 100%;
    height: 101%;
}
于 2015-08-31T19:29:25.633 回答
0

我一直有这个问题很长时间，但我的解决方案是从锚标记中删除 href

IE

<a onclick="test();return false;">Test Link ###</a>

我现在没有跳

希望这对将来的人有所帮助

于 2016-11-18T10:31:45.513 回答