jQuery QTIP - Link zu einer versteckten div aus dem Inneren eines Tooltip

Question

Ich versuche, einen Link in einem Tooltip zu platzieren (QTIP), dass, wenn zeigt den Inhalt einer versteckten div in einem Leuchtkasten (nyroModal) angeklickt. Regelmäßige Anker-Tag nicht in einem Tooltip Link zu dem div Öffnung Inhalt in einem Leuchtkasten erfolgreich.

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

Möglicherweise müssen Code Notizblock zum Kopieren, Speichern als HTML und die Datei zu öffnen. (Jsbin nicht externe js Plugin-Dateien laden)

Jede Hilfe wäre sehr geschätzt. Danke.

Answer 1

Es scheint, dass QTIP ist eine Kopie von ‚div.tipcontent‘ in Speicher (eine Variable).

Ich entdeckte diese durch die Klasse „versteckt“ aus dem div entfernen. Wenn Sie dies tun, werden Sie sehen, dass Sie zwei divs haben. Ein nach wie vor auf der Seite und ein anderer von QTIP aus dem Speicher verwendet.

Als Lösung können Sie QTIP ändern $('a').nyroModal(); den Link Knoten anwenden es aus dem Speicher macht.

Bearbeiten

Um die Lightbox-Effekt auf Ihre qtip Links hinzufügen, ändern Sie Ihre qtip initializer wie folgt:

$('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(); }
    }
});

Bitte beachten Sie die api Aufruf onShow. Dadurch wird die nyroModal zu allen Links auf der Seite und deckt damit den dynamisch generierten Inhalt von qtip erneut bewerben. Wahrscheinlich gibt es eine effizientere Möglichkeit, den jQuery-Selektor auf die spezifischen Verbindung von qtip erzeugt zu verengen, aber das sollte man zumindest beginnen.