Bootstrap Popover跟随页面resize的触发元素

骗子在这里

我从这个论坛尝试了各种答案但没有成功。 我试图让我的bootstrap popover“跟随”在页面resize时触发它的元素。 挑战是弹出窗口是动态生成的，所以我不能给出具体的id。

我的代码重新定位了弹出框，但在resize时它会令人不快地闪烁，并且它以弹出窗口不可见而结束。

如何在resize完成后隐藏弹出框然后再显示它？

我的代码是：

// 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'在某些情况下可以使用