Question

当我在'手动'模式下使用bootstrap popover时，'destroy'和'hide'无法正常工作。当我使用hide和destroy时，popover opacity更改为0，但不会将显示更改为none，这会导致popover容器覆盖下面的内容。否则，如果我使用'toogle'模式，它就能正常工作。

我的代码：

$('[rel="popover"]').popover({
    html: true,
    placement: 'auto',
    container: 'body',
    trigger: 'manual'
});

$('body').on('click' , '[rel="popover"]' , function(e){
    e.stopPropagation();
    $(this).popover('toggle');
});

$('body').on('click' , '.popoverClose' , function(e){
    e.stopPropagation();
    var i = $(this);
    $('.inputInfo').filter('[data-info-id="' +i.data('info-id')+ '"]').popover('hide');
});

// new code
$('body').on('click', function(){
    $('[rel="popover"]').popover('hide');
});

Answer 1

我的临时解决方案如下：

我正在使用：

$('.popover').remove();

删除popovers

和

$('body').on('click' , '[rel="popover"]' , function(e){
    e.stopPropagation();

    var i = $(this);
    var thisPopover = $('.popoverClose').filter('[data-info-id="' +i.data('info-id')+ '"]').closest('.popover');        
    if( thisPopover.is(':visible') ){
        $('.popover').remove();
    }
    else{
        $(this).popover('show');
    }
});

切换弹出窗口

Answer 2

如果您使用自定义构建的Bootstrap，如果您没有在JS部分中检查“过渡”并在支持过渡的浏览器中进行测试，则destroy事件将不起作用。这是因为Bootstrap在jQuery中查看$ .support.transition。如果此值为“truthy”，则Bootstrap假定将存在某种transitionEnd事件，并且在收到此事件之前不会分离popover。但Bootstrap使用其转换库中定义的自定义事件，因此永远不会触发transitionEnd调用。如果您不想重新下载自定义库，则转换代码位于：transition code

Answer 3

如果你想要隐藏popover，请改用：

$('.inputInfo').filter('[data-info-id="' +i.data('info-id')+ '"]').click();

Answer 4

引导弹出窗口的工作

<span class="pop-target">
      <a href="javascript:void(0);" rel="popover"........> </a>
    </span>



  $(".pop-target a").popover('hide');

Answer 5

我已经通过在css文件中添加它来修复它：

.popover.fade{z-index:-1;}

.popover.in{z-index: inherit}

Answer 6

//Works for hover events:

$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').mouseleave(function(e) {
    e.stopPropagation();
    $(this).find('.popover').remove();
 });

Bootstrap .popover（）'show'＆amp; '破坏'不能正常工作

6 个答案: