固定（10/29/2012）

Question

单击触发Twitter Bootstrap Modal弹出窗口的链接会导致浏览器向上滚动页面。此行为仅发生在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 中看到此行为。

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

<小时/>

附加示例

可以在Twitter Bootstrap documentation page for the Modal plugin上重新创建。

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

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

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

同样，这是使用Chrome。

Answer 1

固定（10/29/2012）

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

<小时/>

（原始答案）

这是由于Twitter Bootstrap Modal（从2.1.1开始）的实现中的一个错误。问题的根源是焦点设置为模式 previous ，以完成其转换。这只会在

的条件下发生

浏览器支持CSS转换（您正在使用 bootstrap-transition.js ）;
模态具有类fade;和
当焦点设置为当前视图之外的元素时，浏览器将滚动以将其移动到视图中（例如，Chrome，Safari）。

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

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

A fix has been merged into the 2.1.2-wip branch，现在任何一天都应该发布。

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

JSFiddle

Answer 2

同样的问题。它是由“＃”引起的，并且锚点正在滚动。我通过删除锚标记来修复它并将其放置：

<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>

Answer 3

我的网站上有类似的问题，这是由另一个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的模态，也许这可以帮到你。

Answer 4

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

html,
body {
    min-height: 100%;
    height: 101%;
}

Answer 5

重点关注

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

Answer 6

我这个问题已经存在了很长时间，但我的解决办法是从锚标记中删除href

即。

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

我现在没有跳跃

希望这可以帮助将来的某个人

Twitter Bootstrap Modal在show上滚动页面

附加示例

6 个答案:

固定（10/29/2012）

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

（原始答案）

JSFiddle