Bootstrap Popover contenuto cliccabile quando nascosti

Question

mio sito ha più popovers su una mappa (solo un div immagine di sfondo con) con icone cliccabili:

http://f.cl.ly/items/44382Q2Y3U3t2S450r3w/Skjermbilde%202013-09-01%20kl.%2023.15.58.png

Cliccando le icone, un popover viene mostrato. Questo popover ha una giostra che contiene il testo con link:

http://f.cl.ly/items/0s2v2i193z0u1D0N163D/Skjermbilde%202013-09-01%20kl.%2023.35.34.png

Quando clicco fuori del popover, tutte le popovers sono nascosti. Questo presumibilmente funziona ok. Ho ricevuto il codice da this Stack Overflow question.

Ma il vero problema si verifica quando si fa clic all'esterno del popover per nasconderlo di nuovo. Il popover è nascosto, ma è ancora nel DOM. Ciò significa che i collegamenti sono ancora cliccabili!

http://f.cl.ly/items/0T0p422c1A202b2M1J20/Skjermbilde%202013-09-01%20kl.%2023.34.28.png

Quando scatto l'icona più per nascondere il popover, il popover è nascosta (rimosso?), Ma quando si fa clic al di fuori del segno più (vale a dire qualsiasi punto della pagina), il popover è ancora presente (ma non visibile) sopra lo </body>.

Si prega di aiuto! Questo infastidisce l'inferno fuori di me .. :(

Edit: Potrebbe valere la pena ricordare che le popovers sono dinamicamente aggiunti:

$('.plus').each(function(i) { 

    var $self = $(this); 

    $self.popover({ 
     html: true, 
     title: false, 
     placement: function() { 
      return 'auto left'; // TODO: calculate placing 
     }, 
     content: function() { 

      var html = '<div id="carousel-' + i + '" class="carousel slide">'; 
      var list = '<ol class="carousel-indicators">'; 
      var slides = '<div class="carousel-inner">'; 

      var count = 0; 

      $('.post[data-category="' + $(this).data('category') + '"]').each(function(j) { 

       // add indicator for slide 
       list += '<li data-target="#carousel-' + i + '" data-slide-to="' + count + '"' + (count == 0 ? ' class="active"' : '') + '></li>'; 

       // add html for slide 
       slides += '<div class="item' + (count == 0 ? ' active' : '') + '">' + $(this).html() + '</div>'; 

       // increase counter 
       count++; 

      }); 

      // merge all html 
      html += list + '</ol>' + slides + '</div></div>'; 

      return html; 
     } 
    }); 

Answer 1

penso che è necessario "distruggere" la popover, non solo per " nascondere" si

Vedi l'API qui:. http://getbootstrap.com/2.3.2/javascript.html#popovers

Answer 2

ho avuto un problema simile, forte mal di testa, e la ricerca ho avuto modo di questa pagina:

https://github.com/twbs/bootstrap/issues/4215

A quanto pare quando si aggiunge Popovers a contenuto dinamico è necessario aggiungere questa opzione:

selector: '[rel="popover"]' 

nel tuo caso sarebbe

$self.popover({ 
    selector: '[rel="popover"]' 
    html: true, 
    title: false, 
    ... 

Questo risolto tutto il mio "rilevamento click popover nascosti" problemi.

Answer 3

Questo è quello che ho fatto al fine di evitare che elementi all'interno della popover nascosta da essere cliccato

$('button.new-history').on('hidden.bs.popover', function() { 
    $(this).next().remove(); 
}) 

L'idea è che quando il popover è nascosto, è necessario rimuoverlo dal DOM.

Spero che aiuti!

Answer 4

Nessuna delle altre soluzioni ha funzionato per me perché sto utilizzando altre funzioni per consentire solo un popover alla volta e per nascondere il popover quando perde lo stato attivo (sono anche generati dinamicamente).

Ma ho trovato una soluzione molto semplice usando i CSS per 'risolvere' il problema:

.popover.fade { 
    z-index:-1; 
} 

.popover.fade.in { 
    z-index:2; 
} 

Basta assicurarsi che il .popover.in ha un z-index superiore a quella di altri elementi, e allo stesso modo che la uno senza .in ha uno z-index più basso.

Answer 5

Ho affrontato lo stesso problema e dopo aver cercato per un po 'in modalità F12 in Chrome, ho trovato che la seguente soluzione funzionava per me.

Dopo aver chiuso manualmente la popover con un pulsante:

<button 
    type=button 
    class="btn btn-default pull-right" 
    onclick="$('.mypopoverclass').popover('hide');"> 
    Close 
</button> 

il contenuto del popover era ancora lì, invisibile e nascondere gli altri elementi della pagina.

ho cambiato il tasto un po 'come questo:

<button 
    type=button 
    class="btn btn-default pull-right" 
    onclick="$('.mypopoverclass').popover('hide'); $('.popover.fade').remove()"> 
    Close 
</button> 

Aggiungendo

$('.popover.fade').remove() 

al gestore onClick tasto, la finestra popover è stato rimosso e non è più nascondere gli elementi sullo schermo. Inoltre, le chiamate successive alla finestra popover lo mostreranno di nuovo.

Spero che funzionerà anche per te!