Question

我在这个论坛上尝试过各种答案而没有成功。我正试图让我的引导弹出到＆＃34;跟随＆＃34;在页面上触发它的元素调整大小。挑战是弹出窗口是动态生成的，所以我不能给出具体的id。

我的代码重新定位了popover，但在调整大小时它会不愉快地闪烁，并且弹出窗口不可见。

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

我的代码是：

// 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代码是：

// 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;
        }
    });
});

Answer 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'在某些情况下有效

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

1 个答案: