我正在使用 twitter-bootstrap 和弹出窗口。
我面临以下问题:当用户单击在页面底部打开弹出窗口的链接时,它首先一直滚动到页面顶部。这需要用户向下滚动才能看到弹出窗口打开。在 twitter-bootstrap 网站上的演示中,我没有看到这一点,想知道是否可以就此问题获得帮助。
<div class="span1" style=" width: 60px; ">
<a href="#" class="example2" rel="popover" data-html="true" data-placement="left" data-content="<a href = '/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas'><img src='http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg'></a>" data-original-title="Bhangra indian Jingle Bells balle balle Merry Christmas">
<img src="http://graph.facebook.com/1236870349/picture">
</a>
<div class="popover fade left in" style="top: 831px; left: 805.61669921875px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title">Bhangra indian Jingle Bells balle balle Merry Christmas</h3>
<div class="popover-content">
<p><a href="/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas"><img src="http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg"></a></p>
</div>
</div>
</div>
最佳答案
看起来您现在必须阻止链接的默认行为,因为他们添加了在悬停/聚焦时弹出弹出框的选项。现在链接将激活,因为 href 指向“#”,它将带您到页面顶部。在旧版本之前,它曾经自动阻止此默认设置。
您的 javascript 代码应如下所示:
<script>
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault();
});
</script>
像这样的html
<a href="#"
class="btn btn-large btn-danger"
rel="popover"
data-content="And here's some amazing content. It's very engaging. right?"
data-original-title="A Title">
Click to toggle popover
</a>
这是一个有效的 JSfiddle。 http://jsfiddle.net/hajpoj/KPU47/7/
编辑:或者,您可以使用 div 而不是 anchor 标记,而不必完全阻止默认设置。
<div
class="btn btn-large btn-danger popover-link"
data-content="And here's some amazing content. It's very engaging. right?"
data-original-title="A Title">Click to toggle popover
</div>
<script>
$(".popover-link").popover();
</script>
关于jquery - 如何使用 twitter-bootstrap 和 popover 修复滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13755033/