2013-03-27 3 views
1

Как вы можете видеть из этого jsFiddle, у меня есть Boostrap Popover, который может закрыть внешний клик, а также щелкнуть по значку «x».Bootstrap Popover Close on Any Click

Однако, когда вы нажимаете на другую кнопку popover, первый popover не исчезает.

Есть ли способ изменить javascript, чтобы первый popover исчез на любом клике?

HTML:

<form action="quote-calculator.php" method="post"> 

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

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

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

</form> 

JQuery:

var isVisible = false; 
    var clickedAway = false; 

    $('.btn-danger').popover({ 
      html: true, 
      trigger: 'manual' 
     }).click(function(e) { 
      $(this).popover('show'); 
     $('.popover-content').append('<button class="close" style="position: absolute; top: 0; right: 6px;">&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 
     } 
    }); 

ответ

1

добавить

$('.popover').hide(); 

перед тем

$(this).popover('show'); 

Это скрывает все popover элементы класса перед показом текущего.

Удачи вам!

+0

Удивительная работа! Спасибо! –

1

попробуйте добавить

$('.close:visible').trigger('click'); 

перед тем

$(this).popover('show'); 

Updated Demo Fiddle

+0

Он закрывает первый popover, но иногда он также закрывает второй popover. –

+0

Это хороший шаг вперед! –