点击触发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米。
对于为什么会发生这种情况以及如何预防,有什么建议/想法吗?
附加示例
这可以在Twitter Bootstrap文档页面上重新创建。
在页面上,只需覆盖现有的data-api以使用JavaScript api即可:
$('#modals a[data-toggle="modal"]').on('click',
function(e) {
$('#myModal').modal('toggle');
return false
});
现在点击【启动Demo Modal】按钮,显示Modal时页面会向上滚动。
再次,这是使用Chrome。
7条答案
按热度按时间rkkpypqq1#
修复(10/29/2012)
自Bootstrap v2起已修复此问题。2.0.参见commit e24 b46。...了解详情
(原始答案)
这是由于Twitter Bootstrap Modal实现中的一个bug(截至2.问题的根源在于焦点被设置在模态完成转换之前。这只会在以下情况下发生
1.浏览器支持CSS转换(您正在使用bootstrap-transition。(int n);
1.模态具有类
fade
;和1.当焦点被设置到当前视图之外的元素时,浏览器将滚动以将其移动到视图中(例如,例如,Chrome、Safari)。
应该注意的是,这会影响Data API(基于标记)和Programmatic API(基于JS)。然而,当采用编程方法时,它更明显的原因是,与Data API不同,它不会自动将焦点恢复到触发元素,因此,当模态隐藏时,不会向下滚动视图。
更多信息可以在Twitter Bootstrap repo下的Issue #5336: Modal Scrolls Background Content中找到。
A fix has been merged into the 2.1.2-wip branch,现在应该随时可以发布。
下面是一个使用补丁bootstrap-modal的演示。js**:
JSFiddle
brc7rcf02#
同样的问题。这是由中的“#”引起的,锚正在滚动。我通过删除锚标记并放置以下内容来修复此问题:
qij5mzcb3#
我的网站上也有类似的问题,这是由另一个jquery插件(sidr)引起的。当侧边栏出现时,我打开一个模态窗口,我将被发送回顶部。
在jquery. sidr中。js我将第102-106行从:
收件人:
如果你正在使用这个插件沿着twitter bootstrap的modal,也许这可以帮助你。
ee7vknir4#
我遇到了同样的问题,因为这些CSS行被认为是在浏览器中永久显示滚动条。删除两行解决了问题:
2vuwiymt5#
让焦点回到近距离
az31mfrm6#
我一直有这个问题这么长时间,但我的解决方案是删除href从锚标记
即
我现在跳不起来了
希望这对将来的人有所帮助
laximzn57#
我在Bootstrap v3中遇到了同样的问题。3.5)并添加以下CSS为我解决了它: