CODEWITHSUNDEEP
twitter-bootstraponclickhidepopover
user2075439
user2075439

Reputation: 39

Bootstrap Popover

I would like to be able to click outside the popover to make it dissapear.

This code is working well - closes one popover when another is opened and ofcourse when you clcik the button again it goes away.

var $visiblePopover;

$('body').on('click', '[rel="popover"]', function() {
  var $this = $(this);

  // check if the one clicked is now shown
  if ($this.data('popover').tip().hasClass('in')) {

// if another was showing, hide it
$visiblePopover && $visiblePopover.popover('hide');

// then store reference to current popover
$visiblePopover = $this;

  } else { // if it was hidden, then nothing must be showing
$visiblePopover = '';
  }
});​

I need to keep this current functionality but modify it so that it does the same thing for when you click outside the popover as well.

Upvotes: 3

Views: 4067

Answers (5)

Bear Bear
Bear Bear

Reputation: 9

add this code at the end of bootstrap.min.js
1) 2 popover were click always hide older popover
2） click outside of popover will hide also

$count=0;$(document).click(function(evt){if($count==0){$count++;}else{$('[data-toggle="popover"]').popover('hide');$count=0;}});$('[data-toggle="popover"]').popover();$('[data-toggle="popover"]').on('click', function(e){$('[data-toggle="popover"]').not(this).popover('hide');$count=0;});

Upvotes: 0

csharpsql
csharpsql

Reputation: 2330

This little trick is handy if you want to close all other popovers except the one that has been clicked on:

$('.popover').click(function (evt) {
    evt.stopPropagation();
    $('.popover').not(this).popover('hide');
});

Upvotes: 1

PersianMan
PersianMan

Reputation: 2779

you can do it simply by adding:

$('html').click(function(e) {
     $('.btn').popover('hide');
});

jsfiddle

Upvotes: 1

user2075439
user2075439

Reputation: 39

$.fn.modal.Constructor = Modal
$(function () {
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function (e) {


if($visiblePopover && $visiblePopover){
alert("HIDE POPOVER WHEN MODAL IS OPENED")
$visiblePopover && $visiblePopover.popover('hide');
}
        var $this = $(this),
            href = $this.attr('href'),
            $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))),
            option = $target.data('modal') ? 'toggle' : $.extend({
                remote: !/#/.test(href) && href
            }, $target.data(), $this.data())
            e.preventDefault()
            $target.modal(option).one('hide', function () {
                $this.focus()

            })
    })
})

Upvotes: 0

Matt Urtnowski
Matt Urtnowski

Reputation: 2566

When the button to open the Popover is clicked it should gain focus. When you click away it loses focus and you might be able to catch it with .blur() and then use the popover('hide').

Upvotes: -1

Related Questions