jQuery qTip - ссылка на скрытый div из всплывающей подсказки

Question

Я пытаюсь поместить ссылку внутри всплывающей подсказки (qTip), которая при нажатии показывает содержимое скрытого div внутри лайтбокса (nyroModal). Регулярный тег привязки не входит в подсказку, которая связывается с содержимым открытия div в лайтбокс.

Код: http://jsbin.com/omafe/2/

Может потребоваться скопировать код в блокнот, сохранить как HTML и откройте файл. (jsbin не загружает файлы внешнего js-плагина)

Любая помощь будет принята с благодарностью. Благодарю.

Answer 1

Похоже, что qTip хранит копию «div.tipcontent» в памяти (переменную).

Я обнаружил это, удалив класс «скрытый» из div. Когда вы это сделаете, вы увидите, что у вас есть два div. Один по-прежнему на странице и другой, используемый qTip из памяти.

В качестве решения вам может потребоваться изменить qTip, чтобы применить $('a').nyroModal(); к узлам ссылок, которые он отображает из памяти.

EDIT

Чтобы добавить эффект лайтбокса ваших QTIP ссылок, измените QTIP инициализатору следующим образом:

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

Пожалуйста, обратите внимание на апи вызов OnShow. Это приведет к повторному применению nyroModal ко всем ссылкам на странице, таким образом покрывая динамически созданный контент из qtip. Вероятно, более эффективный способ сузить селектор jQuery к конкретной ссылке, созданной qtip, но это должно заставить вас начать хотя бы.