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

问题描述

点击触发Twitter Bootstrap Modal弹出的链接会导致浏览器向上滚动页面。

这是一个演示页面：

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

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

我使用以下内容函数来触发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 中看到此行为。

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

---

其他示例

这可以在用于Modal插件的Twitter Bootstrap文档页面。

在页面上，只需覆盖现有的data-api使用JavaScript api代替：

  $（'＃modals a [data-toggle =modal]' 'click'，
 function（e）{
 $（'＃myModal'）modal（'toggle'）; 
 return false 
} 
  

现在，如果点击启动演示模式按钮，

解决方案

固定（10/29/2012）

此问题已在Bootstrap v2.2.0之后修复。有关详情，请参见提交e24b46 ... 。

---

（原始答案）

在Bootstrap Modal（2.1.1版）的实现中的bug。问题的根源是焦点被设置为模态先以完成其转换。这只会在

1. 的情况下发生，浏览器支持CSS转换（并且您使用 bootstrap-transition.js ）;


2. 模式具有 fade 和


3. 当焦点设置为当前视图外的元素时，浏览器将滚动以将其移动到视图中（例如Chrome，Safari）。

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

有关详细信息，请参阅Twitter Bootstrap repo，网址为问题＃5336：模式滚动背景内容。

已修复合并到 2.1.2-wip 分支中，该分支应该可以立即发布。

使用补丁 bootstrap-modal.js ：

JSFiddle

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.

Here is a demonstration page:

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

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).

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

and the links are of the form:

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

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?

---

Additional Example

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

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

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

Again, this is using Chrome.

解决方案

Fixed (10/29/2012)

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

---

(original answer)

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. the browser supports CSS transitions (and you are using bootstrap-transition.js);
2. the modal has the class fade; and
3. when focus is set to an element outside the current view, the browser will scroll to move it into view (e.g., Chrome, Safari).

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.

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

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

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

JSFiddle

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