Comment rejeter un kangourou Twitter Bootstrap en cliquant à l’extérieur ?

Question

Pouvons-nous obtenir popovers à être renvoyé de la même manière que modals, c’est à dire. rendre ferme lorsque l’utilisateur clique quelque part en dehors de leur ?

Malheureusement je ne peux pas il suffit d’utiliser real modale au lieu de kangourou, car modal signifie position : fixe et qui ne serait pas plus aucun kangourou. :(

Answer 1

Mise à jour: Un peu plus robuste solution: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Pour les boutons contenant uniquement du texte:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

Pour les boutons contenant des icônes d'utilisation:

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

Pour JS Généré Popovers Utiliser '[data-original-title]' à la place de '[data-toggle="popover"]'

Mise en garde: La solution ci-dessus permet de multiples popovers d'être ouvert à la fois.

Une liste à un moment s'il vous plaît:

Mise À Jour: Bootstrap 3.0.x, voir le code ou les violons http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Cette poignées de fermeture de popovers déjà ouvert et ne pas cliqué sur ou de leurs liens n'ont pas été cliqué.

Answer 2

<pre><code></code><p>Ceci ferme popovers tout si vous cliquez n’importe où sauf sur un kangourou</p></pre>

Answer 3

Plus simple, plus sûre version, fonctionne avec n'importe quel de démarrage de la version.

Démo: http://jsfiddle.net/guya/24mmM/

Démo 2: ne Pas rejeter en cliquant à l'intérieur de la liste de contenu http://jsfiddle.net/guya/fjZja/

Démo 3: Plusieurs popovers: http://jsfiddle.net/guya/6YCjW/

---

Simplement appeler cette ligne permettra de faire disparaître toutes les popovers:

$('[data-original-title]').popover('hide');

---

Rejeter tous les popovers lorsque vous cliquez à l'extérieur avec ce code:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

L'extrait ci-dessus joindre un événement de clic sur le corps. Lorsque l'utilisateur clique sur une fenêtre pop-over, il va se comporter comme d'habitude. Lorsque l'utilisateur clique sur quelque chose qui n'est pas une liste, il va fermer tous les popovers.

Il va également travailler avec les popovers sont lancées avec Javascript, contrairement à certains autres exemples qui ne fonctionnent pas. (voir la démo)

Si vous ne voulez pas de rejeter en cliquant à l'intérieur de la liste de contenu, utilisez ce code (voir le lien à la 2ème démo):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

Answer 4

2.3.2 « bootstrap » vous pouvez de régler la détente pour « focus » et ça marche :

Answer 5

Ce n’est fondamentalement pas très complex, mais il y a quelques vérifications à faire pour éviter les pépins.

Démo (jsfiddle)