javascript - jQuery qTip - 从工具提示中链接到隐藏的 div

Question

我正在尝试在工具提示 (qTip) 中放置一个链接，单击该链接时会显示灯箱 (nyroModal) 内隐藏 div 的内容。不在工具提示中的常规锚标记成功链接到灯箱中的 div 打开内容。

代码：http: //jsbin.com/omafe/2/

可能需要将代码复制到记事本，另存为 html 并打开文件。（jsbin 不加载外部 js 插件文件）

任何帮助将不胜感激。谢谢。

Answer 1

qTip 似乎将“div.tipcontent”的副本存储在内存中（一个变量）。

我通过从 div 中删除“隐藏”类来发现这一点。当你这样做时，你会看到你有两个 div。一个仍在页面上，另一个由 qTip 从内存中使用。

作为一种解决方案，您可能必须修改 qTip 以应用于$('a').nyroModal();它从内存呈现的链接节点。

编辑

要将灯箱效果添加到您的 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 的 api 调用。这会将 nyroModal 重新应用到页面上的所有链接，从而覆盖从 qtip 动态生成的内容。可能有一种更有效的方法可以将 jQuery 选择器缩小到 qtip 生成的特定链接，但这至少可以帮助您入门。