Domanda

Sto cercando di inserire un link all'interno di un tooltip (QTIP) che se cliccato mostra il contenuto di un div nascosto all'interno di una lightbox (nyroModal). tag anchor regolare non in un link tooltip al contenuto apertura div in un lightbox con successo.

Codice: http://jsbin.com/omafe/2/

potrebbe essere necessario copiare il codice di blocco note, salvare come html e aprire il file. (Jsbin non caricando js esterni plugin di file)

Qualsiasi aiuto sarebbe molto apprezzato. Grazie.

È stato utile?

Soluzione

Sembra che QTIP memorizza una copia di 'div.tipcontent' in memoria (variabile).

ho scoperto questo rimuovendo la classe "nascosto" dal div. Quando si esegue questa operazione, vedrete che si dispone di due div. Uno ancora sulla pagina e un'altra utilizzato da QTIP dalla memoria.

Come soluzione, potrebbe essere necessario modificare QTIP applicare $('a').nyroModal(); ai nodi di collegamento rende dalla memoria.

Modifica

Per aggiungere l'effetto lightbox per il vostro link QTIP, modificare la qtip inizializzatore nel seguente modo:

$('div.tooltip').qtip({
    content: $('div.tipcontent').html(),
    position: {
        corner: {
        target: 'topRight',
        tooltip: 'bottomRight'
        }
    },
    style: { 
        width: 150,
        padding: 10,
        background: 'silver',
        color: 'black',
        tip: 'bottomMiddle',
    },
    hide: {
        fixed: true
    },
    api: {
        onShow: function() { $('a').nyroModal(); }
    }
});

Si prega di notare la chiamata API per OnShow. Questo si ri-applicare il nyroModal a tutti i link sulla pagina che copre così il contenuto generato dinamicamente da qtip. C'è probabilmente un modo più efficiente per limitare il selettore jQuery per il collegamento specifico generato da qtip, ma questo dovrebbe iniziare almeno.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top