Comment puis-je fermer un kangourou Twitter Bootstrap en un clic depuis n’importe où (d’autre) sur la page ?

Question

Je suis actuellement à l'aide de popovers avec Twitter Bootstrap, commencé comme ceci:

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('toggle');
        e.preventDefault();
    });

Comme vous pouvez le voir, ils sont déclenchés manuellement, et en cliquant sur .popup-marqueur (qui est un div avec une image d'arrière-plan) permet de basculer d'une fenêtre pop-over. Cela fonctionne très bien, mais je voudrais aussi être en mesure de fermer la fenêtre pop-over avec un clic n'importe où sur la page (mais pas sur la liste elle-même!).

J'ai essayé plusieurs choses différentes, y compris les suivantes, mais avec pas de résultats à montrer pour elle:

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

Comment puis-je fermer la fenêtre pop-over avec un clic n'importe où sur la page, mais pas avec un clic sur la liste elle-même?

Answer 1

En supposant qu'une seule liste peut être visible à tout moment, vous pouvez utiliser un ensemble de drapeaux pour marquer quand il y a une liste visible, et seulement ensuite les cacher.

Si vous définissez l'écouteur d'événement sur le corps du document, il sera le déclencheur lorsque vous cliquez sur l'élément marqué avec "pop-up marqueur". De sorte que vous aurez à appeler stopPropagation() sur l'objet de l'événement. Et appliquer la même chose en cliquant sur la liste elle-même.

Ci-dessous est un code JavaScript qui fait cela. Il utilise jQuery >= 1.7

jQuery(function() {
    var isVisible = false;

    var hideAllPopovers = function() {
       $('.popup-marker').each(function() {
            $(this).popover('hide');
        });  
    };

    $('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).on('click', function(e) {
        // if any other popovers are visible, hide them
        if(isVisible) {
            hideAllPopovers();
        }

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

        // handle clicking on the popover itself
        $('.popover').off('click').on('click', function(e) {
            e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
        });

        isVisible = true;
        e.stopPropagation();
    });


    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });
});

http://jsfiddle.net/AFffL/539/

Le seul inconvénient est que vous ne serez pas en mesure d'ouvrir 2 popovers en même temps. Mais je pense que ce serait source de confusion pour l'utilisateur, de toute façon :-)

Answer 2

C’est encore plus facile :

Answer 3

J'avais un besoin similaire, et trouvé cette extension très peu de Twitter Bootstrap Liste par Lee Carmichael, appelé BootstrapX - clickover. Il a aussi quelques exemples d'utilisation ici. Fondamentalement, il va changer la liste dans un élément interactif qui se ferme lorsque vous cliquez ailleurs sur la page, ou sur un bouton de fermeture à l'intérieur de la liste. Cela permettra également de multiples popovers ouvert à la fois, et un tas d'autres fonctionnalités intéressantes.

Answer 4

La solution acceptée m’a donné quelques problèmes (en cliquant sur l’élément « .popup-marqueur » de le kangourou ouvert fait le popovers ne fonctionne ne pas par la suite). Je suis venu avec cette autre solution qui fonctionne parfaitement pour moi et c’est très simple (j’utilise Bootstrap 2.3.1) :

Mise à jour : Ce code fonctionne avec 3 Bootstrap ainsi !

Answer 5

lire « Rejeter sur le prochain clic » ici http://getbootstrap.com/javascript/#popovers

Vous pouvez utiliser le déclencheur de focus pour rejeter popovers sur le prochain clic, mais vous devez utiliser le tag, pas le tag et vous devez également inclure un `` attribut...

Exemple :