放大/缩小或调整浏览器窗口大小时，Bootstrap Popover 显示在错误位置答案

【问题标题】：Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window放大/缩小或调整浏览器窗口大小时，Bootstrap Popover 显示在错误位置
【发布时间】：2012-11-30 04:03:10
【问题描述】：

当我通过放大或缩小重新调整任何浏览器的窗口大小时。弹出框未更新位置并显示在错误的位置。

如何在重新调整/缩放浏览器窗口时更改 Bootstrap Popover 的放置/位置。

【问题讨论】：

标签： twitter-bootstrap position popover

【解决方案1】：

它似乎在 Bootstrap 2.2.1 中运行良好（除非我理解你的问题是错误的）。试试http://twitter.github.com/bootstrap/javascript.html#modals 的现场演示，看看这是否是您想要的。我对窗口使用 onresize 事件来正确设置复杂模态及其内部的大小。

【讨论】：

是的！该示例工作正常。我的在页面上。如何通过 reszie 事件实现这一目标。请给出一些示例代码。谢谢
我认为应该这样做： $(window).resize(function () { $('#myModal') .css('margin-top', ($('#myModal') .outerHeight() / 2) * -1) .css('margin-left', ($('#myModal').outerWidth() / 2) * -1); });
嗯.. 意识到你的意思是弹出窗口，而不是模态:-) 我给出的示例是模态的。弹出框的想法是使用要显示它的元素来引用它的位置。另一种简单的方法是识别在调整大小时显示的弹出框，关闭它们然后再次打开它们（如果它们有静态文本）。
非常感谢，但现在我不知道如何检查哪个弹出窗口是否打开...因为可能有很多弹出窗口...
感谢您指导解决方案。 ` $(window).resize(function(){ if ($('.popover').is(":visible")) { $('#azeem').popover('show'); } }); `

【解决方案2】：

我尝试使用offset().top 和outerHeight() 自己重新定位它，但遇到了问题。我的解决方案是简单地再次调用弹出框的show 事件：

    $(window).off("resize").on("resize", function() {
        $(".popover").each(function() {
            var popover = $(this);
            if (popover.is(":visible")) {
                var ctrl = $(popover.context);
                ctrl.popover('show');
            }
        });
    });

【讨论】：

【解决方案3】：

它不适用于具有多个弹出框的页面，因为它会在窗口调整大小时显示所有弹出框

【讨论】：

虽然这可能是解决问题的宝贵提示，但答案确实需要比这更多的细节。请edit 提供示例代码来说明您的意思。或者，考虑将其写为评论。