Twitter Bootstrap Modal 在显示时向上滚动页面 [英] Twitter Bootstrap Modal scrolling the page up on show

问题描述

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

Clicking on a link which triggers a Twitter Bootstrap Modal to pop up is causing the browser to scroll up the page. This behavior is only occurring in Chrome.

这是一个演示页面:

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

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

The page has 600 rows of links, causing the page body to exceed window height. If any of these links is clicked, it displays the modal dialog. When in Chrome, clicking any of the links below the initial view will cause the background page to scroll up (not always entirely to the top).

我使用以下函数来触发Modal的显示:

I am use the following function to trigger the display of the Modal:

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 中看到了这种行为.

I am seeing this behavior in Chrome 22.0.1229.94 m.

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

Any suggestions/ideas as to why this is happening and how to prevent it?

---

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

This can be recreated on the Twitter Bootstrap documentation page for the Modal plugin.

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

Once on the page, simply override the existing data-api to use the JavaScript api instead:

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

现在，如果点击Launch Demo Modal按钮，页面将在显示模态时向上滚动.

Now, if the Launch Demo Modal button is clicked, the page will scroll up when the modal is shown.

同样，这是使用 Chrome.

Again, this is using Chrome.

推荐答案

已修复 (10/29/2012)

此问题自 Bootstrap v2.2.0 以来已得到修复.详情请参阅commit e24b46....H3>

---

Fixed (10/29/2012)

This issue has been fixed since Bootstrap v2.2.0. See commit e24b46... for details.

---

这是由于 Twitter Bootstrap Modal 实现中的一个错误(从 2.1.1 开始).问题的根源在于焦点在它完成转换之前被设置在模态之前.这只会发生在

This is due to a bug in the implementation of the Twitter Bootstrap Modal (as of 2.1.1). The root of the problem is that the focus is set to the modal prior to it completing its transition. This will only occur under the condition that

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

需要注意的是，这会影响数据 API(基于标记)和程序化 API(基于 JS).然而，在采用编程方法时它更引人注目的原因是，与数据 API 不同，它不会自动将焦点恢复到触发元素，因此，当模式隐藏时不会向下滚动视图.

It should be noted that this affects both the Data API (markup-based) and the Programmatic API (JS-based). However, the reason it is more noticeable when taking the programmatic approach is because, unlike the Data API, it does not automatically restore focus to the triggering element, and, hence, does not scroll the view back down when the modal is hidden.

在 Twitter Bootstrap 存储库上的 问题 #5336:模态滚动背景内容.

More info is available on the Twitter Bootstrap repo under Issue #5336: Modal Scrolls Background Content.

一项修复已合并到 2.1.2-wip 分支中，现在应该随时发布.

A fix has been merged into the 2.1.2-wip branch, which should be up for release any day now.

这是一个使用补丁 bootstrap-modal.js 的演示:

Here is a demo using the patch bootstrap-modal.js:

这篇关于Twitter Bootstrap Modal 在显示时向上滚动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！