Bootstrap Popover 跟随页面调整大小的触发元素答案

【问题标题】：Bootstrap Popover follow trigger element on page resizeBootstrap Popover 跟随页面调整大小的触发元素
【发布时间】：2017-01-17 04:30:29
【问题描述】：

FIDDLE HERE

我尝试了该论坛的各种答案，但均未成功。我试图让我的引导弹出窗口“跟随”在页面调整大小时触发它的元素。挑战是弹出框是动态生成的，所以我不能给出特定的 ID。

我的代码重新定位了弹出框，但在调整大小时闪烁不愉快，并且以弹出框不可见结束。

如何隐藏弹出框，然后在调整大小完成后再次显示？

我的代码是：

// Reposition popover when screen changes size
$(window).on('resize', function() {
    $('[data-toggle="popover"], [data-original-title]').each(function() {
        if ($(this).data('bs.popover').tip().hasClass('in')) {
            $(this).popover('hide');
            $(this).popover('show');
        }
    });
});

我的弹出框代码是：

// Popover Menu initialize
$('.btn-row-popover-menu').popover({
    placement: 'left',
    trigger: 'click',
    html: true,
    title: function() {
        return $(this).parent().find('.btn-row-popover-menu-head').html();
    },
    content: function() {
        return $(this).parent().find('.btn-row-popover-menu-body').html();
    }

}).on('show.bs.popover', function(e) {
    if (window.activePopover) {
        $(window.activePopover).popover('hide')
    }
    window.activePopover = this;

}).on('hide.bs.popover', function() {
    window.activePopover = null;
});

// Close popover when clicking anywhere on the screen
$(document).on('click', function(e) {
    $('[data-toggle="popover"], [data-original-title]').each(function() {
        var target = $(e.target);
        if (!target.is('.popover') && !target.is('.popover *') && !target.is('.btn-row-popover-menu') && !target.is('.btn-row-popover-menu *') || target.is('.btn-popover-close')) {
            (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false;
        }
    });
});

【问题讨论】：

标签： jquery css twitter-bootstrap bootstrap-popover

【解决方案1】：

以下解决了您的问题。我们只需单击按钮两次以模拟关闭和打开。在弹出框上隐藏和显示不会像普通 UI 元素那样真正起作用。

$(window).on('resize', function() {
    $('[data-toggle="popover"], [data-original-title]').each(function() {
        if ($(this).data('bs.popover').tip().hasClass('in')) {
            $(this).closest('.btn-row-popup-menu').trigger('click');
            $(this).closest('.btn-row-popup-menu').trigger('click');
        }
    });
});

另外还有一个属性 container: 'body' 在某些情况下有效

【讨论】：