2013-03-27 134 views
1

正如你所见,从这个jsFiddle,我有一个Boostrap Popover可以关闭外部点击以及点击“x”。Bootstrap 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

令人敬畏的工作!谢谢! – 2013-03-27 22:17:13

1

尝试添加

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

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

Updated Demo Fiddle

+0

它关闭了第一个popover,但有时它也关闭了第二个popover。 – 2013-03-27 14:22:46

+0

虽然这是一个很好的步骤! – 2013-03-27 14:23:31