如何修复滚动与twitter-bootstrap和popover？

问题描述

我使用twitter-bootstrap和popovers。

I am using twitter-bootstrap and popovers.

我面临以下问题：当用户点击在页面底部打开弹出框的链接时，它会一直滚动到页面顶部第一。这需要用户向下滚动以查看popover打开。在twitter-bootstrap网站上的演示中，我没有看到这个，并且想知道我是否能在这个问题上获得帮助。

I am facing the following problem: when the user clicks on a link that opens a popover at the bottom of the page, it scrolls all the way to top of the page first. This requires the user to scroll back down to see the popover open. In the demos on the twitter-bootstrap site, I don't see this and was wondering if I could get help on this issue.

<div class="span1" style=" width: 60px; ">
    <a href="#" class="example2" rel="popover" data-html="true" data-placement="left" data-content="&lt;a href = '/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas'&gt;&lt;img src='http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg'&gt;&lt;/a&gt;" 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指向＃，它会带你到页面的顶部。

It seem like you now have to prevent the default behavior of the link because they added the option to popup the popover on hover/focus. Right now the link will activate and since the href is pointing to "#" it will bring you to the top of the page. Before in older versions, it used to prevent this default automatically.

您的JavaScript代码应该如下所示：

Your javascript code should look something like this:

<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。

Here is a working JSfiddle. http://jsfiddle.net/hajpoj/KPU47/7/

修改：或者，您可以使用div而不是锚标记，而不必执行整个预设默认事件。

Alternatively you could use a div instead of a anchor tag and not have to do the whole prevent default thing.

<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>

这篇关于如何修复滚动与twitter-bootstrap和popover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！