我正在使用twitter-bootstrap和popovers。
我遇到以下问题:当用户点击页面底部打开一个popover的链接时,它会一直滚动到页面顶部。这需要用户向下滚动才能看到popover打开。在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>
解决方法
看起来你现在必须防止链接的默认行为,因为他们添加了在悬浮/焦点上弹出popover的选项。现在,链接将激活,并且由于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而不是一个锚标签,而不必做整个防止默认的事情。
<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>