CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Bootstrap Popover Close on Any Click

As you can see from this jsFiddle, I have a Boostrap Popover that is able to close with an outside click as well as with a click on the "x."

However, when you click on another button popover, the first popover does not disappear.

Is there a way to change the javascript so that the first popover disappears on any click?

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
      }
    });

Upvotes: 1

Views: 2497

Answers (2)

Steve Valliere
Steve Valliere

Reputation: 1892

add

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

before

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

This hides all popover class elements before showing the current one.

Good luck!

Upvotes: 1

couzzi
couzzi

Reputation: 6366

try adding

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

before

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

Updated Demo Fiddle

Upvotes: 1

Related Questions