2014-01-17 4 views
15

Когда я использую bootstrap popover в 'manual' режиме 'destroy' и 'hide' не работает должным образом. Когда я использую скрытие и уничтожение, непрозрачность popover меняется на 0, но на его не меняющемся дисплее нет ни одного, что приводит к тому, что контейнер popover покрывает содержимое ниже. В противном случае, если я использую режим «toogle», он работает правильно.Bootstrap .popover() 'show' & 'destroy' не работает должным образом

Мой код:

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

ответ

15

Мое временное решение выглядит следующим образом:

Я использую:

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

для переключения Popovers

+1

Если я реализую $ (". Popover"). Remove(), то popover не нажимает на элемент. Он подходит, только если я нахожусь снаружи, а затем нажмите элемент. Есть ли обходной путь для этого. – sms

+0

@sms Этот вопрос задан 2 года назад, я считаю, вы должны задать новый вопрос, потому что решение для более новой версии Bootstrap может отличаться. –

1

Если Вы желаете, чтобы скрыть использование поповер вместо этого:

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

Да, я буду работать это но когда я хочу скрыть все popovers на веб-сайте, например когда я нажимаю тело? который покажет все скрытые popovers и скрыть все видимые ... –

+0

Похоже, это то, что вы хотите сделать, используя toggle – Cognitronic

+0

Не совсем, я хочу использовать переключатель, когда я его закрываю, но когда я нажимаю любой другой элементы веб-сайта Я ожидаю, что скрыть все popovers (я добавил новый верхний код), и в этом случае он не работает –

1

Работа для начальной загрузки пирог

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



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

Если вы используете пользовательские сборки Bootstrap, разрушающего событие не будет если вы не отметили «переходы» в разделе JS и тестируете в браузере, который поддерживает переходы. Это связано с тем, что Bootstrap смотрит на $ .support.transition в jQuery. Если это значение является «правдивым», Bootstrap предполагает, что произойдет какое-то событие переходаEnd и не будет отделять popover до тех пор, пока это событие не будет получено. Но Bootstrap использует пользовательские события, определенные в их библиотеке переходов, поэтому вызов переходаEnd никогда не будет запущен. Если вы не хотите, чтобы повторно загрузить настроенную библиотеку, код переходов здесь: transition code

0

Я установил его, добавив это в CSS файле:

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

.popover.in{z-index: inherit} 
Смежные вопросы