Twitter Bootstrap Modal在show上滚动页面

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

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

---

附加示例

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

进入页面后,只需覆盖现有的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起,此问题已得到修复.有关详细信息,请参阅提交e24b46 ....

(原始答案)

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

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

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

有关更多信息,请参阅问题#5336下的Twitter Bootstrap回购:模态滚动背景内容.

修复程序已合并到2.1.2-wip分支中,该分支现在应该可以在任何一天发布.

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

的jsfiddle

Answer 2

同样的问题.它是由"#"引起的,并且锚点正在滚动.我通过删除锚标记来修复它并将其放置:

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