javascript - 在调整浏览器窗口大小时动态更改弹出框位置

Question

我正在使用 Twitter Bootstrap 弹出窗口，但我不知道如何在调整浏览器窗口大小的同时更改弹出窗口位置。问题是当我调整窗口大小时，弹出框保持固定位置。我想像其他 html 元素一样延迟弹出窗口。

代码：

$('#popover1').popover({
    html : true,
    content: function() {
        return $("#form").html();
    },
    placement: "top"
});

Answer 1

这对我有用。它show为所有可见的弹出框调用事件：

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

Answer 2

看看以下问题和答案：

• Bootstrap Popover 在放大/缩小或调整浏览器窗口大小时显示在错误的位置
• 基于窗口调整大小的jQuery位置元素

您需要为 resize 事件使用事件处理程序：

$(window).resize(function() {
  // your positioning code here
});

在此代码中，您必须重新定位您的元素。