Bootstrap Popover按照页面调整大小的触发元素 [英] Bootstrap Popover follow trigger element on page resize

问题描述

FIDDLE此处

我有试图从这个论坛的各种答案没有成功。我试图让我的bootstrap popover跟随在页面调整大小触发它的元素。挑战是popovers是动态生成的，所以我不能给一个特定的id。

我的代码重新定位popover，但它在调整大小时不愉快，它以popover invisible结束。 / p>

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

我的代码是：

  //当屏幕更改大小时重新定位popover 
 $（window）.on（'resize'，function（）{
 $（'[data-toggle =popover]，[data-original-title]'）。 ）.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; 
}）; 
 
 //点击屏幕上的任何位置时关闭popover 
 $（document）.on（'click'，function（e）{
 $（'[data-toggle = popover），每个（function（）{
 var target = $（e.target）; 
 if（！target.is（' ）&&&⌖ if（'。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; 
} 
}）; 
}）; 
  

解决方案

我们只需要点击按钮两次来模拟关闭和打开。隐藏和显示popovers不会真正工作，因为它发生在正常的UI元素。

$（window）.on（'resize' （）{
$（'[data-toggle =popover]，[data-original-title]'）。 bs.popover'）。tip（）。hasClass（'in'））{
$（this）.closest（'。btn-row-popup-menu'）。trigger（'click'）;
$（this）.closest（'。btn-row-popup-menu'）。trigger（'click'）;
}
}）;
}）; c $ c>

此外，还有一个属性 container：'body' >

FIDDLE HERE

I have tried various answers from this forum without success. I am trying to get my bootstrap popover to "follow" the element that triggered it on page resize. Challenge is the popovers are dynamically generated so I cannot give a specific id.

My code repositions the popover but it flickers unpleasantly during resize and it ends with the popover invisible.

How do I hide the popover then show it again when resize is completed?

My code is:

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

My popover code is:

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

解决方案

Below fixes your issue. We are just going to click the button twice to simulate close and open. hide and show on popovers will not really work as it happens with normal UI elements.

$(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'); } }); });

Additionally there is a property container : 'body' which works in some cases

这篇关于Bootstrap Popover按照页面调整大小的触发元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！