单击触发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.