jquery – 如何使用twitter-bootstrap和popover修复滚动?

我正在使用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="&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指向“#”,它将带您到页面的顶部。在旧版本之前,它用于自动防止此默认。

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

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...