Jak utworzyć Bootstrap Popover Zamknij Opcja

Question

Jak można zobaczyć w jQuery, skorzystałem z odpowiedzi od this question, aby popping Bootstrap zniknął z zewnętrznego kliknięcia. Teraz szukam, aby dodać "x" w prawym górnym rogu, który zamyka popover na kliknięcie.

Czy istnieje prosty sposób utworzenia klikalnego "x" w prawym górnym rogu okna, które zamknęłoby okienko po kliknięciu?

HTML:

<h3>Live demo</h3> 
<div class="bs-docs-example" style="padding-bottom: 24px;"> 
    <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a> 
</div> 

jQuery:

var isVisible = false; 
var clickedAway = false; 

$('.btn-danger').popover({ 
    html: true, 
    trigger: 'manual' 
}).click(function(e) { 
    $(this).popover('show'); 
    clickedAway = false 
    isVisible = true 
    e.preventDefault() 
}); 

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

Answer 1

oto kod jquery:

Ten właśnie dodaje przycisk X w prawym górnym rogu:

  var isVisible = false; 
      var clickedAway = false; 

      $('.btn-danger').popover({ 
        html: true, 
        trigger: 'manual' 
       }).click(function(e) { 
        $(this).popover('show'); 
        $('.popover-title').append('<button type="button" class="close">&times;</button>'); 
        clickedAway = false 
        isVisible = true 
        e.preventDefault() 
       }); 

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

A ten c traci popup tylko gdy przycisk X kliknięciu:

  $('.btn-danger').popover({ 
        html: true, 
        trigger: 'manual' 
       }).click(function(e) { 
        $(this).popover('show'); 
        $('.popover-title').append('<button type="button" class="close">&times;</button>'); 
        $('.close').click(function(e){ 
         $('.btn-danger').popover('hide'); 
        }); 
        e.preventDefault(); 
       }); 

Answer 2

użyłem tag HTML w kodzie jquery ....

$("#mypopover").popover({ 
      html: true, 
      title: "Title"+ '<div class="pull-right"><a href="javascript:;" id="close" class="glyphicon glyphicon-remove" style="color: #C7C3C3"></a></div>', 
      placement: placement, 
      content: "My Popover Content" 
     }); 
     $("#mypopover").popover('show'); 

jeżeli chcesz zamknąć swoją popover można to zrobić:

$("#close").popover("hide"); 

lub to:

$("#close").popover("destroy"); if you have many popovers 

Answer 3

Na to pytanie już odpowiedziałem, ale twój post pomógł mi częściowo. Natknąłem się na prostszy sposób, aby zrealizować to zadanie, przypuśćmy, że masz wszystkie popovers z klasą ".pop", powinno to rozwiązać wszystkie twoje problemy:

$('.pop').on({ 
    click:function(){ 
    $('.pop').not(this).popover('hide'); 
    } 
});