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

How to fix scrolling with twitter-bootstrap and popover?

提问by sharataka

I am using twitter-bootstrap and popovers.

我正在使用 twitter-bootstrap 和 popovers。

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.

我面临以下问题：当用户单击在页面底部打开弹出窗口的链接时，它首先滚动到页面顶部。这需要用户向下滚动以查看弹出窗口打开。在 twitter-bootstrap 站点上的演示中，我没有看到这一点，我想知道我是否可以获得有关此问题的帮助。

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

回答by hajpoj

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.

看起来您现在必须阻止链接的默认行为，因为他们添加了在悬停/聚焦时弹出弹出窗口的选项。现在链接将激活，因为 href 指向“#”，它将带您到页面顶部。以前在旧版本中，它用于自动阻止此默认设置。

Your javascript code should look something like this:

您的 javascript 代码应如下所示：

<script>
$("a[rel=popover]")
    .popover()
    .click(function(e) {
        e.preventDefault();
     });
 </script> 

With html like this

像这样的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>

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

这是一个有效的 JSfiddle。http://jsfiddle.net/hajpoj/KPU47/7/

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

编辑：或者，您可以使用 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>

回答by Florin Dobre

I have encountered exactly the same issue with the popover and it was enough to replace href="#" with href="javascript://".

我遇到了与 popover 完全相同的问题，用 href="javascript://" 替换 href="#" 就足够了。

回答by djibe

Just use this code. No extra div, classor whatever else needed.

只需使用此代码。没有额外的div，class或任何其他需要。

$("a[data-toggle=popover]").popover().click(function(e) {
        e.preventDefault();
});

回答by hotmeteor

Very similar to what @hajpoj said, except it's the order that matters. As well, this is a nicer way to do it because you can dynamically add .popoverelements to the page and it will continue to work.

与@hajpoj 所说的非常相似，只是顺序很重要。同样，这是一种更好的方法，因为您可以动态地.popover向页面添加元素，它会继续工作。

$('body').on('click', 'a[rel=popover]', function(e) {
  e.preventDefault();
  return;
}).popover({
  selector: 'a[rel=popover]'
});

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus nisi. Nulla facilisi. In bibendum ultricies ultrices. Pellentesque sagittis, purus non venenatis mollis, nulla risus fermentum nisi, eget vulputate nulla felis nec mi. Donec rutrum
  nisi sed turpis pulvinar non fermentum risus fringilla. Ut sapien tellus, venenatis sit amet venenatis quis, rhoncus et nulla. Nam augue nisl, consequat vitae convallis sit amet, egestas at ante. Aliquam fringilla viverra porttitor.
</p>
<p>
  Aliquam ornare suscipit posuere. Phasellus ac turpis vitae elit sollicitudin condimentum. Duis massa purus, porttitor sed cursus eu, lacinia at velit. Nam ullamcorper mi ac sapien pretium mollis. Curabitur ante elit, euismod eget elementum condimentum,
  semper a dui. Pellentesque luctus orci elit, ut mattis dolor. Quisque semper nisl eu enim cursus consectetur a in elit. Phasellus faucibus gravida elit vel lobortis. Donec vitae nisi ut libero sollicitudin sodales pretium at purus. Praesent vulputate
  dignissim pulvinar. Nunc sit amet mauris a arcu pulvinar aliquam. Vivamus varius nisl elementum dolor posuere volutpat. Maecenas sed lectus tortor. Aenean sit amet dapibus arcu.
</p>
<p>
  Aliquam posuere sagittis viverra. Aenean velit lorem, vehicula quis viverra vel, porttitor at est. Curabitur at molestie tortor. Quisque at justo eu lacus accumsan aliquam. Ut auctor dui et augue posuere eleifend. Aliquam erat volutpat. Nunc enim enim,
  ullamcorper at scelerisque eu, cursus sit amet lectus. Quisque ac augue erat, vitae tempus diam. Nunc at erat pulvinar lectus vestibulum congue. Vivamus lorem leo, tristique non tempus a, laoreet sit amet ligula. Maecenas tristique vulputate ante, nec
  aliquet enim lobortis vel. Morbi convallis quam sed tellus consectetur hendrerit. Vestibulum vel elit at risus tempor posuere. Vivamus ultricies molestie feugiat. Sed iaculis eros massa. Mauris ac nunc orci.
</p>
<p>
  Aliquam erat volutpat. Pellentesque volutpat iaculis tortor vel hendrerit. Cras sapien orci, fermentum id molestie vel, feugiat in tortor. Quisque vitae felis non tellus volutpat aliquet luctus sit amet felis. Pellentesque gravida tempus turpis, eu lobortis
  eros rutrum eu. In malesuada ultrices leo, eu pretium quam molestie quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ac risus eros. Ut posuere lobortis magna, at blandit mauris tristique ut. Suspendisse
  volutpat mollis elit non sagittis. Nam in dictum felis. Maecenas dolor turpis, aliquet vel vestibulum vel, hendrerit non tortor. In pharetra nulla nec arcu rutrum ut commodo tortor facilisis. Curabitur congue feugiat felis vel sollicitudin. Proin in
  mollis dolor. Nulla mattis, turpis vestibulum vehicula blandit, tortor neque posuere diam, sed tempus neque odio id diam.
</p>
<p>
  Vestibulum non quam et elit consequat pellentesque sed at leo. Pellentesque iaculis, purus sit amet cursus imperdiet, orci mi consectetur sapien, sed sodales dui lectus vel enim. Curabitur ac arcu at lectus dictum luctus. Duis et aliquet eros. Suspendisse
  mi mi, porta at elementum pulvinar, pulvinar eu elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce molestie mollis neque, et elementum odio dapibus sed. Nulla blandit sollicitudin quam semper dictum.
  Pellentesque rutrum rhoncus lacus et facilisis. Sed mattis felis sit amet neque viverra ullamcorper. Fusce volutpat quam scelerisque nisi dignissim vel congue nulla sodales.
</p>


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

回答by Matthijs

add onclick="return false;" to your link; it prevents the browser from following the "#" link:

添加 onclick="返回假；" 到您的链接；它阻止浏览器跟随“#”链接：