Javascript 将引导弹出框保持在视口内

我正在尝试使用带有按钮的侧边栏创建一个菜单，每个按钮都有一个指定的popover，其中包含相关数据。 不幸的是，其中一个弹出框可能包含任意数量的行，在某些情况下，它可能部分位于视口之外

有关问题的示例，请参见（单击“任务”按钮）

我想我可以通过编程将popover的top更改为定义的值，当为负值时（即在视口之外），为此，我已经在收听

show.bs.popover

事件时获得了对popover第一个div的引用。 不幸的是，我认为由于它还没有被渲染，它的大小似乎是（23107），而它应该是（300，xxx）和（0，0）的位置

有没有办法解决这个问题？也许先在屏幕外渲染popover来测量它？如果是的话，我会怎么做

---

谢谢

您可以随时使用

覆盖Popor的
top
值！重要信息

这可能不是最好的长期计划，因为它可能会干扰未来的CSS更改

 .popover {
        width: 300px !important;
        top: 0px !important;
    }

更新：

从你提到的活动中走出来这似乎是可行的

$('.btn-popover').on('shown.bs.popover', function (event) {
    //Set timeout to wait for popup div to redraw(animation)
    setTimeout(function(){
        if($('div.popover').css('top').charAt(0) === '-'){
             $('div.popover').css('top', '0px');
             var buttonTop = $(event.currentTarget).position().top;
             var buttonHeight = $(event.currentTarget).height();
             $('.popover.left>.arrow').css('top', buttonTop + (buttonHeight/2));
        }
    },100);
});

这将使箭头与按钮对齐。

---

在即将发布的Bootstrap v3.2.0中修复了我相信：

---

由于在

中引入了新的

视口

功能，我已经想到了这一点。。不幸的是，它会影响所有的弹出窗口（请参见“用户”按钮上的效果），而我只想更改那些以某种方式超出视口的弹出窗口（同样的情况可能发生在底部..我还不知道侧边栏中会有多少个按钮）。是的，我做了。我又读了一遍，以防我漏掉了什么，但这仍然不是我需要的。即使使用函数，该函数也只能返回支持的值之一，用于相对于触发工具提示的元素定位工具提示。对我来说，别无选择：它必须被留下。对更新的评论：是的，这也是我已经探索过的。。它的工作，但只有在弹出完成其动画；效果不太好看。无论如何，如果我删除淡入淡出动画，它可以工作；在这种情况下，可以同时移动箭头。目前，我正试图在bootstrap的源代码中找到将内容分配给popover的确切位置。宽度是正确的，但高度显示为-4。这里有一个改进的版本，修复了丑陋的跳跃并正确地定位了箭头：这正是我需要的。我认为3.2还没有发布。。这是否意味着我必须从小提琴上抓取js？抱歉，耽搁了，但我一直很忙；我尝试使用链接的版本，但我遇到了一些问题，这是因为在这些日子里，我从通过$（obj）.html（）设置内容改为直接通过$（obj）设置内容。发生的情况是，我第一次正确地通过popover获取，但在关闭它之后，$（obj）从dom中删除，并且无法再次显示。目前，我通过合并Bootstrap3.2到3.1.1中的一些行进行管理，它似乎工作正常。你有兴趣看看我改变了什么吗？如何在html中使用这个？我在文件里找不到任何解释。事实上，医生给了你手指，告诉你：“当这些问题出现时，你自己解决。”很好！投票被否决，因为它没有明确给出问题的解决方案，只是简单地将您引导到将来可能中断或更改的非站点链接。