Bootstrap Popover

Question

Je voudrais pouvoir cliquer en dehors du popover pour le faire disparaître.

Ce code fonctionne bien - ferme un popover quand un autre est ouvert et bien sûr quand vous cliquez à nouveau sur le bouton, il disparaît.

var $visiblePopover; 

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

    // check if the one clicked is now shown 
    if ($this.data('popover').tip().hasClass('in')) { 

// if another was showing, hide it 
$visiblePopover && $visiblePopover.popover('hide'); 

// then store reference to current popover 
$visiblePopover = $this; 

    } else { // if it was hidden, then nothing must be showing 
$visiblePopover = ''; 
    } 
});​ 

J'ai besoin de garder cette fonctionnalité en cours, mais le modifier afin qu'il fait la même chose lorsque vous cliquez en dehors du popover ainsi.

Answer 1

Lorsque le bouton pour ouvrir le Popover est cliqué, il devrait gagner le focus. Lorsque vous cliquez loin, il perd le focus et vous pourriez être en mesure de l'attraper avec .blur() et ensuite utiliser le popover('hide').

Answer 2

$.fn.modal.Constructor = Modal 
$(function() { 
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function (e) { 


if($visiblePopover && $visiblePopover){ 
alert("HIDE POPOVER WHEN MODAL IS OPENED") 
$visiblePopover && $visiblePopover.popover('hide'); 
} 
     var $this = $(this), 
      href = $this.attr('href'), 
      $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), 
      option = $target.data('modal') ? 'toggle' : $.extend({ 
       remote: !/#/.test(href) && href 
      }, $target.data(), $this.data()) 
      e.preventDefault() 
      $target.modal(option).one('hide', function() { 
       $this.focus() 

      }) 
    }) 
}) 

Answer 3

vous pouvez le faire en ajoutant simplement:

$('html').click(function(e) { 
    $('.btn').popover('hide'); 
}); 

jsfiddle

Answer 4

Cette petite astuce est pratique si vous voulez fermer tous les autres popovers, sauf celui qui a été cliqué sur:

$('.popover').click(function (evt) { 
    evt.stopPropagation(); 
    $('.popover').not(this).popover('hide'); 
}); 

Answer 5

ajoutez ce code à la fin de bootstrap.min.js
1) 2 popover étaient toujours plus, cliquez cacher popover
2) cliquez en dehors popover cachera également

$count=0;$(document).click(function(evt){if($count==0){$count++;}else{$('[data-toggle="popover"]').popover('hide');$count=0;}});$('[data-toggle="popover"]').popover();$('[data-toggle="popover"]').on('click', function(e){$('[data-toggle="popover"]').not(this).popover('hide');$count=0;});