web-dev-qa-db-fra.com

Comment puis-je fermer/supprimer Bootstrap Popover lorsque vous cliquez sur l'élément déclencheur popover?

jsFiddle: http://jsfiddle.net/kAYyR/

Capture d'écran:

 screenshot

Voici ce qui fonctionne:

  1. Ouvrir popover sur le clic du bouton
  2. Fermer popover en cliquant en dehors de popover
  3. Fermer popover en cliquant sur le bouton .close

MAIS ... Je ne parviens pas à fermer le popover lorsque vous cliquez à nouveau sur le bouton d'origine. Au lieu de cela, le popover clignote.

Dupliquez-le vous-même ici .

Comment puis-je accomplir cela?

HTML:

<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button>
<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div>

JS:

$('#popoverId').popover({
    html: true,
    title: "Popover Title",
    content: function () {
        return $('#popoverContent').html();
    }
});


var isVisible = false;
var clickedAway = false;

$('.popoverThis').popover({
    html: true,
    trigger: 'manual'
}).click(function (e) {
    $(this).popover('show');
    $('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">&times;</a>');
    clickedAway = false
    isVisible = true
    e.preventDefault()
});

$(document).click(function (e) {
    if (isVisible & clickedAway) {
        $('.popoverThis').popover('hide')
        isVisible = clickedAway = false
    } else {
        clickedAway = true
    }
});
javascriptjquerytwitter-bootstraponclickpopover
10
Ryan

Voulez-vous un travail comme ça?

http://jsfiddle.net/kAYyR/3/

$('#popoverId').popover({
    html: true,
    title: 'Popover Title<a class="close" href="#");">&times;</a>',
    content: $('#popoverContent').html(),
});

$('#popoverId').click(function (e) {
    e.stopPropagation();
});

$(document).click(function (e) {
    if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
        $('#popoverId').popover('hide');
    }
});
26
Steely Wing

J'utilise ceci: 

    $('[data-toggle="popover"]').popover({html: true, container: 'body'});

    $('[data-toggle="popover"]').click(function (e) {
        e.preventDefault();
        $('[data-toggle="popover"]').not(this).popover('hide');
        $(this).popover('toggle');
    });

    $(document).click(function (e) {
        if ($(e.target).parent().find('[data-toggle="popover"]').length > 0) {
            $('[data-toggle="popover"]').popover('hide');
        }
    });
6
Cam Tullos

Ce code simple va masquer tous les popovers sur la page.

1
emrah kasal

il peut simplement être fait en utilisant ce code

<div id='content'>something here</div>
 $('[data-toggle=popover]').popover({
        html: true,
        content: function () {
            return $('#content').html();
        }
    }).click(function (e) {
        $('[data-toggle=popover]').not(this).popover('hide');
    });
0
Hafsal Rh