Twitter Bootstrap模态框在显示时向上滚动页面

Question

在点击触发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
  });

如果点击启动演示模态框按钮，当出现模态框时页面会向上滚动。

同样，这是在使用Chrome浏览器的情况下。

- Lexicon

---

你能否发一个例子？代码？图片？网站链接？ - Cristiano Fontes

这对我来说似乎很好用..? [版本22.0.1229.94 m] 如果是这样，请发布您自己的解决方案..? - EricG

正常运行，尝试删除缓存并重新打开网页。 - mas-designs

我正在使用版本号为22.0.1229.94 m的软件，当模态框弹出时，页面会向上滚动。很奇怪。而且在我的另外两台电脑上（同样的版本），也会出现相同的问题。 - Lexicon

我看到了，每次我点击链接时，它会向上滚动大约50行左右。 - merv

我怀疑这与CSS过渡有关。请注意，禁用它们（即$.support.transition = null）会阻止滚动。在FF中运行良好；IE9不支持过渡。可能是Chrome的一个错误？ - merv

Answer 1

已修复 (2012年10月29日)

这个问题已经在Bootstrap v2.2.0中得到了解决。请参见提交 e24b46... 以获取更多详细信息。

---

(原回答)

这是由于Twitter Bootstrap Modal（截至2.1.1）实现中的一个错误导致的。问题的根源是在模态窗口完成其过渡之前将焦点设置为模态窗口之前。只有在以下情况下才会发生这种情况：

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

应该注意的是，这会影响数据API（基于标记的）和编程API（基于JS的）。但是，它之所以在采取编程方法时更为显着，是因为与数据API不同，它不会自动将焦点恢复到触发元素，并因此在隐藏模态时不会向下滚动视图。

有关更多信息，请参见Twitter Bootstrap存储库下的问题#5336：Modal Scrolls Background Content。

修复已合并到2.1.2-wip分支中，即将发布。

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

JSFiddle

- merv

---

谢谢，找了很久，这个帮了很多忙。 - Dan

@kritzikratzi 请提供一个 jsfiddle（或类似的）演示问题，以及浏览器信息。如果这是一个合法的错误，请发布到 github（[Issue＃5336]（https://github.com/twitter/bootstrap/issues/5336）），但关注点在于展示该错误存在于最新版本（v3.0.2）中，就我所见，它并不存在。 - merv

我在每个浏览器的v3.1.1.0版本上都遇到了同样的错误。我认为这是由于我的CSS或JavaScript与某些冲突所致。但它太大了，无法调试。有任何经验吗？ - Ivan Wang

这里没有固定 - 我正在使用Bootstrap v3.2.0并遇到这个问题。 - MandM

Answer 2

出现了同样的问题。这是由于在中使用“#”，并且锚点正在滚动引起的。我通过删除锚点标记并使用以下代码来解决这个问题：

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

- Ales

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

To:

// 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的模态框一起使用此插件，也许这可以帮助您。

- thephper

Answer 4

我一直遇到这个问题，但我的解决方案是从锚标签中删除 href 属性。

即：

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

我现在没有跳跃

希望这能帮助未来的某个人

- Celeste

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

- ShAkKiR

Answer 6

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

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

- Yana Okkulata

Answer 7

我曾经遇到同样的问题（在Bootstrap v3.3.5中），添加以下CSS代码解决了我的问题：

body.modal-open {
  display: inline;
}

- prashant