Come posso chiudere un popover Bootstrap di Twitter con un clic da qualsiasi parte (altro) sulla pagina?

Attualmente sto usando popovers con Twitter Bootstrap, avviato in questo modo:

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

Come puoi vedere, vengono attivati ​​manualmente e facendo clic su .popup-marker (che è un div con un'immagine di sfondo) commuta un popover. Funziona benissimo, ma mi piacerebbe anche poter chiudere il popover con un clic in qualsiasi altro punto della pagina (ma non sul popover stesso!).

Ho provato alcune cose diverse, tra cui le seguenti, ma senza risultati da mostrare per questo:

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

Come posso chiudere il popover con un clic in qualsiasi altro punto della pagina, ma non con un clic sul popover stesso?

Supponendo che un solo popover possa essere visibile in qualsiasi momento, è possibile utilizzare un set di flag per contrassegnare quando è visibile un popover e solo successivamente nasconderli.

Se si imposta il listener di eventi sul corpo del documento, si attiverà quando si fa clic sull'elemento contrassegnato con 'popup-marker'. Quindi dovrai chiamare stopPropagation()l'oggetto evento. E applica lo stesso trucco facendo clic sul popover stesso.

Di seguito è riportato un codice JavaScript funzionante che esegue questa operazione. Utilizza 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/

L'unica avvertenza è che non sarai in grado di aprire 2 popover contemporaneamente. Ma penso che sarebbe confuso per l'utente, comunque :-)

Questo è ancora più semplice:

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

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

Avevo un bisogno simile e ho trovato questa piccola grande estensione del Twitter Bootstrap Popover di Lee Carmichael, chiamato BootstrapX - clickover . Ha anche alcuni esempi di utilizzo qui . Fondamentalmente cambierà il popover in un componente interattivo che si chiuderà quando fai clic altrove sulla pagina o su un pulsante di chiusura all'interno del popover. Ciò consentirà inoltre di aprire più popover contemporaneamente e un sacco di altre belle funzionalità.

Il plugin può essere trovato qui .

Esempio di utilizzo

<button rel="clickover" data-content="Show something here. 
    <button data-dismiss='clickover'
    >Close Clickover</button>"
>Show clickover</button>

javascript:

// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();

La soluzione accettata mi ha dato alcuni problemi (facendo clic sull'elemento '.popup-marker' del popover aperto, i popover non hanno funzionato in seguito). Ho trovato quest'altra soluzione che funziona perfettamente per me ed è abbastanza semplice (sto usando Bootstrap 2.3.1):

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $('.popup-marker').not(this).popover('hide');
    $(this).popover('toggle');
});
$(document).click(function(e) {
    if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
        $('.popup-marker').popover('hide');
    }
});

AGGIORNAMENTO: Questo codice funziona anche con Bootstrap 3!

leggi "Ignora al prossimo clic" qui http://getbootstrap.com/javascript/#popovers

Puoi usare il trigger focus per eliminare i popover al clic successivo, ma devi usare il <a>tag, non il <button>tag, e devi anche includere un tabindexattributo ...

Esempio:

<a href="#" tabindex="0" class="btn btn-lg btn-danger"
  data-toggle="popover" data-trigger="focus" title="Dismissible popover"
  data-content="And here's some amazing content. It's very engaging. Right?">
  Dismissible popover
</a>

Tutte le risposte esistenti sono abbastanza deboli, in quanto si basano sulla cattura di tutti gli eventi del documento, sulla ricerca di popover attivi o sulla modifica della chiamata a .popover().

Un approccio molto migliore è quello di ascoltare gli show.bs.popovereventi nel corpo del documento e quindi reagire di conseguenza. Di seguito è riportato un codice che chiuderà i popover quando si fa clic o escsi preme il documento, rilegando solo i listener di eventi quando vengono visualizzati i popover:

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    $.each(visiblePopovers, function() {
      $(this).popover("hide");
    });
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

https://github.com/lecar-red/bootstrapx-clickover

È un'estensione del popover bootstrap di Twitter e risolverà il problema in modo molto semplice.

Per qualche motivo nessuna delle altre soluzioni qui ha funzionato per me. Tuttavia, dopo un sacco di risoluzione dei problemi, sono finalmente arrivato a questo metodo che funziona perfettamente (almeno per me).

$('html').click(function(e) {
  if( !$(e.target).parents().hasClass('popover') ) {
    $('#popover_parent').popover('destroy');
  }
});

Nel mio caso stavo aggiungendo un popover a una tabella e posizionandolo assolutamente sopra / sotto a quello su tdcui si faceva clic. La selezione della tabella è stata gestita da jQuery-UI Selectable, quindi non sono sicuro che ciò interferisca. Tuttavia, ogni volta che facevo clic all'interno del popover, il mio gestore di clic che mirava $('.popover')non funzionava mai e la gestione degli eventi veniva sempre delegata al $(html)gestore di clic. Sono abbastanza nuovo per JS, quindi forse mi sto perdendo qualcosa?

Spero comunque che questo aiuti qualcuno!

Dò a tutti i miei popovers ancore la classe activate_popover. Li attivo tutti in una volta caricati

$('body').popover({selector: '.activate-popover', html : true, container: 'body'})

per far funzionare la funzionalità clic via che utilizzo (nello script caffè):

$(document).on('click', (e) ->
  clickedOnActivate = ($(e.target).parents().hasClass("activate-popover") || $(e.target).hasClass("activate-popover"))
  clickedAway = !($(e.target).parents().hasClass("popover") || $(e.target).hasClass("popover"))
if clickedAway && !clickedOnActivate
  $(".popover.in").prev().popover('hide')
if clickedOnActivate 
  $(".popover.in").prev().each () ->
    if !$(this).is($(e.target).closest('.activate-popover'))
      $(this).popover('hide')
)

Che funziona perfettamente con bootstrap 2.3.1

Anche se ci sono molte soluzioni qui, vorrei proporre anche le mie, non so se c'è qualche soluzione lassù che risolva tutto, ma ne ho provate 3 e hanno avuto problemi, come fare clic sul popover stesso lo nasconde, altri che se avessi fatto clic su un altro pulsante popover / entrambi i popover multipli sarebbero ancora visualizzati (come nella soluzione selezionata), tuttavia, questo ha risolto tutto

var curr_popover_btn = null;
// Hide popovers function
function hide_popovers(e)
{
    var container = $(".popover.in");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        if( curr_popover_btn != null )
        {
            $(curr_popover_btn).popover('hide');
            curr_popover_btn = null;
        }
        container.hide();
    }
}
// Hide popovers when out of focus
$('html').click(function(e) {
    hide_popovers(e);
});
$('.popover-marker').popover({
    trigger: 'manual'
}).click(function(e) {
    hide_popovers(e);
    var $popover_btns = $('.popover-marker');
    curr_popover_btn = this;
    var $other_popover_btns = jQuery.grep($($popover_btns), function(popover_btn){
                return ( popover_btn !== curr_popover_btn );
            });
    $($other_popover_btns).popover('hide');
    $(this).popover('toggle');
    e.stopPropagation();
});

Vorrei mettere a fuoco il pop-over appena creato e rimuoverlo dalla sfocatura. In questo modo non è necessario controllare quale elemento del DOM è stato cliccato e il pop-over può essere cliccato e anche selezionato: non perderà il focus e non scomparirà.

Il codice:

    $('.popup-marker').popover({
       html: true,
       trigger: 'manual'
    }).click(function(e) {
       $(this).popover('toggle');
       // set the focus on the popover itself 
       jQuery(".popover").attr("tabindex",-1).focus();
       e.preventDefault();
    });

    // live event, will delete the popover by clicking any part of the page
    $('body').on('blur','.popover',function(){
       $('.popup-marker').popover('hide');
    });

Ecco la soluzione che ha funzionato molto bene per me, se può aiutare:

/**
* Add the equals method to the jquery objects
*/
$.fn.equals = function(compareTo) {
  if (!compareTo || this.length !== compareTo.length) {
    return false;
  }
  for (var i = 0; i < this.length; ++i) {
    if (this[i] !== compareTo[i]) {
      return false;
    }
  }
  return true;
};

/**
 * Activate popover message for all concerned fields
 */
var popoverOpened = null;
$(function() { 
    $('span.btn').popover();
    $('span.btn').unbind("click");
    $('span.btn').bind("click", function(e) {
        e.stopPropagation();
        if($(this).equals(popoverOpened)) return;
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");            
        }
        $(this).popover('show');
        popoverOpened = $(this);
        e.preventDefault();
    });

    $(document).click(function(e) {
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");   
            popoverOpened = null;
        }        
    });
});

Ecco la mia soluzione, per quello che vale:

// Listen for clicks or touches on the page
$("html").on("click.popover.data-api touchend.popover.data-api", function(e) {

  // Loop through each popover on the page
  $("[data-toggle=popover]").each(function() {

    // Hide this popover if it's visible and if the user clicked outside of it
    if ($(this).next('div.popover:visible').length && $(".popover").has(e.target).length === 0) {
      $(this).popover("hide");
    }

  });
});

Ho avuto qualche problema a farlo funzionare su bootstrap 2.3.2. Ma l'ho declinato in questo modo:

$(function () {
  $(document).mouseup(function (e) {
        if(($('.popover').length > 0) && !$(e.target).hasClass('popInfo')) {
            $('.popover').each(function(){
                $(this).prev('.popInfo').popover('hide');
            });
        }
    });

    $('.popInfo').popover({
        trigger: 'click',
        html: true
    });
});

ottimizzato leggermente la soluzione @David Wolever:

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    /* this was giving problems and had a bit of overhead
      $.each(visiblePopovers, function() {
        $(this).popover("hide");
      });
    */
    while (visiblePopovers.length !== 0) {
       $(visiblePopovers.pop()).popover("hide");
    }
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

Questa domanda è stata posta anche qui e la mia risposta fornisce non solo un modo per comprendere i metodi di attraversamento DOM jQuery ma 2 opzioni per gestire la chiusura dei popover facendo clic all'esterno.

Apri più popover contemporaneamente o un popover alla volta.

Inoltre questi piccoli frammenti di codice possono gestire la chiusura di pulsanti contenenti icone!

https://stackoverflow.com/a/14857326/1060487

Questo funziona come un fascino e lo uso.

Si aprirà il popover quando si fa clic e se si fa di nuovo clic si chiuderà, anche se si fa clic al di fuori del popover il popover verrà chiuso.

Questo funziona anche con più di 1 popover.

    function hideAllPopovers(){
    $('[data-toggle="popover"]').each(function() {
        if ($(this).data("showing") == "true"){
            $(this).data("showing", "false");
            $(this).popover('hide');                
        }
    });
}
$('[data-toggle="popover"]').each(function() {
        $(this).popover({
            html: true,
            trigger: 'manual'
        }).click(function(e) {
            if ($(this).data("showing") !=  "true"){
                hideAllPopovers();
                $(this).data("showing", "true");
                $(this).popover('show');
            }else{
                hideAllPopovers();
            }
            e.stopPropagation();
        });
});

$(document).click(function(e) {
    hideAllPopovers();
});

Un'altra soluzione, ha coperto il problema che ho avuto con il clic dei discendenti del popover:

$(document).mouseup(function (e) {
    // The target is not popover or popover descendants
    if (!$(".popover").is(e.target) && 0 === $(".popover").has(e.target).length) {
        $("[data-toggle=popover]").popover('hide');
    }
});

Lo faccio come di seguito

$("a[rel=popover]").click(function(event){
    if(event.which == 1)
    {   
        $thisPopOver = $(this);
        $thisPopOver.popover('toggle');
        $thisPopOver.parent("li").click(function(event){
            event.stopPropagation();
            $("html").click(function(){
                $thisPopOver.popover('hide');
            });
        });
    }
});

Spero che questo ti aiuti!

Se stai cercando di utilizzare Twitter Bootstrap Popover con PJAX, questo ha funzionato per me:

App.Utils.Popover = {

  enableAll: function() {
    $('.pk-popover').popover(
      {
        trigger: 'click',
        html : true,
        container: 'body',
        placement: 'right',
      }
    );
  },

  bindDocumentClickEvent: function(documentObj) {
    $(documentObj).click(function(event) {
      if( !$(event.target).hasClass('pk-popover') ) {
        $('.pk-popover').popover('hide');
      }
    });
  }

};

$(document).on('ready pjax:end', function() {
  App.Utils.Popover.enableAll();
  App.Utils.Popover.bindDocumentClickEvent(this);
});

@RayOnAir, ho lo stesso problema con le soluzioni precedenti. Mi avvicino anche alla soluzione @RayOnAir. Una cosa che è migliorata è chiudere popover già aperto quando si fa clic su un altro marker popover. Quindi il mio codice è:

var clicked_popover_marker = null;
var popover_marker = '#pricing i';

$(popover_marker).popover({
  html: true,
  trigger: 'manual'
}).click(function (e) {
  clicked_popover_marker = this;

  $(popover_marker).not(clicked_popover_marker).popover('hide');
  $(clicked_popover_marker).popover('toggle');
});

$(document).click(function (e) {
  if (e.target != clicked_popover_marker) {
    $(popover_marker).popover('hide');
    clicked_popover_marker = null;
  }
});

Ho trovato che questa è una soluzione modificata del suggerimento di pbaron sopra, perché la sua soluzione ha attivato il popover ('nascondi') su tutti gli elementi con 'popup-marker' di classe. Tuttavia, quando si utilizza popover () per il contenuto html anziché il contenuto dei dati, come sto facendo di seguito, tutti i clic all'interno di quel popup html attivano effettivamente il popover ('nascondi'), che chiude immediatamente la finestra. Questo metodo riportato di seguito scorre ogni elemento .popup-marker e scopre innanzitutto se il genitore è correlato all'ID del marker .popup su cui è stato fatto clic e, in tal caso, non lo nasconde. Tutti gli altri div sono nascosti ...

        $(function(){
            $('html').click(function(e) {
                // this is my departure from pbaron's code above
                // $('.popup-marker').popover('hide');
                $('.popup-marker').each(function() {
                    if ($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id'))) {
                        $(this).popover('hide');
                    }
                });
            });

            $('.popup-marker').popover({
                html: true,
                // this is where I'm setting the html for content from a nearby hidden div with id="html-"+clicked_div_id
                content: function() { return $('#html-'+$(this).attr('id')).html(); },
                trigger: 'manual'
            }).click(function(e) {
                $(this).popover('toggle');
                e.stopPropagation();
            });
        });

Ho pensato a questo:

Il mio scenario includeva più popover nella stessa pagina e nasconderli li rendeva semplicemente invisibili e per questo motivo non era possibile fare clic sugli oggetti dietro il popover. L'idea è di contrassegnare il collegamento popover specifico come "attivo" e quindi è possibile semplicemente "attivare" il popover attivo. In questo modo il popover verrà chiuso completamente.

$('.popover-link').popover({ html : true, container: 'body' })

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

Stavo cercando di creare una soluzione semplice per un semplice problema. I post sopra sono buoni ma così complicati per un semplice problema. Quindi ho fatto una cosa semplice. Ho appena aggiunto un pulsante di chiusura. È perfetto per me.

            $(".popover-link").click(function(){
                $(".mypopover").hide();
                $(this).parent().find(".mypopover").show();
        })
        $('.close').click(function(){
    $(this).parents('.mypopover').css('display','none');
});



          <div class="popover-content">
        <i class="fa fa-times close"></i>
    <h3 class="popover-title">Title here</h3>
your other content here
        </div>


   .popover-content {
    position:relative;
    }
    .close {
        position:absolute;
        color:#CCC;
        right:5px;
        top:5px;
        cursor:pointer;
    }

Mi piace questo, semplice ma efficace ..

var openPopup;

$('[data-toggle="popover"]').on('click',function(){
    if(openPopup){
        $(openPopup).popover('hide');

    }
    openPopup=this;
});

Aggiungi btn-popoverclasse al tuo pulsante / link popover che apre il popover. Questo codice chiuderà i popover facendo clic all'esterno di esso.

$('body').on('click', function(event) {
  if (!$(event.target).closest('.btn-popover, .popover').length) {
    $('.popover').popover('hide');
  }
});

Una soluzione ancora più semplice, basta scorrere tutti i popover e nascondersi in caso contrario this.

$(document).on('click', '.popup-marker', function() {
    $(this).popover('toggle')
})

$(document).bind('click touchstart', function(e) {
    var target = $(e.target)[0];
    $('.popup-marker').each(function () {
        // hide any open popovers except for the one we've clicked
        if (!$(this).is(target)) {
            $(this).popover('hide');
        }
    });
});

$('.popForm').popover();

$('.conteneurPopForm').on("click",".fermePopover",function(){
    $(".popForm").trigger("click");
});

Per essere chiari, basta innescare il popover

Questo dovrebbe funzionare in Bootstrap 4:

$("#my-popover-trigger").popover({
  template: '<div class="popover my-popover-content" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>',
  trigger: "manual"
})

$(document).click(function(e) {
  if ($(e.target).closest($("#my-popover-trigger")).length > 0) {
    $("#my-popover-trigger").popover("toggle")
  } else if (!$(e.target).closest($(".my-popover-content")).length > 0) {
    $("#my-popover-trigger").popover("hide")
  }
})

Spiegazione:

• La prima sezione introduce il popover secondo i documenti: https://getbootstrap.com/docs/4.0/components/popovers/
• Il primo "if" nella seconda sezione controlla se l'elemento cliccato è un discendente di # my-popover-trigger. Se questo è vero, attiva o disattiva il popover (gestisce il clic sul trigger).
• Il secondo "if" nella seconda sezione controlla se l'elemento cliccato è un discendente della classe di contenuto popover che è stata definita nel modello di init. In caso contrario, significa che il clic non era all'interno del contenuto del popover e che il popover può essere nascosto.

Prova data-trigger="focus"invece di "click".

Questo ha risolto il problema per me.