Jak mogę zamknąć/zamknąć Bootstrap Popover po kliknięciu elementu wyzwalającego popover?

Question

jsFiddle: http://jsfiddle.net/kAYyR/

Zrzut ekranu:

Oto, co działa:

1. Otwarte popover przycisk kliknij
2. Zamknij popover na kliknięcie poza popover
3. Zamknij okienko po kliknięciu przycisku .close

ALE ... Nie mogę wyłączyć zamknięcia okna po ponownym kliknięciu oryginalnego przycisku. Zamiast tego popover miga i włącza się ponownie.

Powiel to sam here.

Jak mogę to zrobić?

HTML:

<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button> 
<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div> 

JS:

$('#popoverId').popover({ 
    html: true, 
    title: "Popover Title", 
    content: function() { 
     return $('#popoverContent').html(); 
    } 
}); 


var isVisible = false; 
var clickedAway = false; 

$('.popoverThis').popover({ 
    html: true, 
    trigger: 'manual' 
}).click(function (e) { 
    $(this).popover('show'); 
    $('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">&times;</a>'); 
    clickedAway = false 
    isVisible = true 
    e.preventDefault() 
}); 

$(document).click(function (e) { 
    if (isVisible & clickedAway) { 
     $('.popoverThis').popover('hide') 
     isVisible = clickedAway = false 
    } else { 
     clickedAway = true 
    } 
}); 

Answer 1

Chcesz pracować w ten sposób?

http://jsfiddle.net/kAYyR/3/

$('#popoverId').popover({ 
    html: true, 
    title: 'Popover Title<a class="close" href="#");">&times;</a>', 
    content: $('#popoverContent').html(), 
}); 

$('#popoverId').click(function (e) { 
    e.stopPropagation(); 
}); 

$(document).click(function (e) { 
    if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) { 
     $('#popoverId').popover('hide'); 
    } 
}); 

Answer 2

Używam tego:

$('[data-toggle="popover"]').popover({html: true, container: 'body'}); 

    $('[data-toggle="popover"]').click(function (e) { 
     e.preventDefault(); 
     $('[data-toggle="popover"]').not(this).popover('hide'); 
     $(this).popover('toggle'); 
    }); 

    $(document).click(function (e) { 
     if ($(e.target).parent().find('[data-toggle="popover"]').length > 0) { 
      $('[data-toggle="popover"]').popover('hide'); 
     } 
    });