小编Lex*_*con的帖子

Twitter Bootstrap Modal在show上滚动页面

单击触发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");
}
Run Code Online (Sandbox Code Playgroud)

和链接的形式:

<a href="" onclick="test();return false;">Test Link ###</a>
Run Code Online (Sandbox Code Playgroud)

我在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
  });
Run Code Online (Sandbox Code Playgroud)

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

同样,这是使用Chrome.

html javascript css scroll twitter-bootstrap-2

11
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×1

html ×1

javascript ×1

scroll ×1

twitter-bootstrap-2 ×1