1

ツールチップ (qTip) 内にリンクを配置しようとしています。クリックすると、ライトボックス (nyroModal) 内の非表示の div のコンテンツが表示されます。ツールチップにない通常のアンカー タグは、ライトボックスのコンテンツを開く div に正常にリンクします。

コード: http://jsbin.com/omafe/2/

コードをメモ帳にコピーし、html として保存してファイルを開く必要がある場合があります。(jsbin が外部の js プラグイン ファイルを読み込まない)

どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

2

It appears that qTip is storing a copy of 'div.tipcontent' in memory (a variable).

I discovered this by removing the class "hidden" from the div. When you do this, you'll see that you have two divs. One still on the page and another used by qTip from memory.

As a solution, you may have to modify qTip to apply $('a').nyroModal(); to the link nodes it renders from memory.

EDIT

To add the lightbox effect to your qtip links, modify your qtip initializer as follows:

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

Please note the api call to onShow. This will re-apply the nyroModal to all the links on the page thus covering the dynamically generated content from qtip. There's probably a more efficient way to narrow down the jQuery selector to the specific link generated by qtip, but this should get you started at least.

于 2010-08-09T21:13:13.317 に答える