Fancybox 按功能显示内联内容

Question

如何分配一个 fancybox 以按功能显示内联内容？由于某些原因我不想/不能使用：

<a class="various" href="#inline">Inline</a>

如何使用函数来实现？

简化示例（不起作用）：

$(document).on('click', '#test a', function()
{
        $.fancybox(
        {
            type: "inline",
            href: "#dialog"
        });
});

Answer 1

你的代码（喜欢）：

jQuery(document).ready(function ($) {
    $(document).on('click', '#test a', function () {
        $.fancybox({
            type: "inline",
            href: "#dialog"
        });
    });
}); // ready

... 工作得很好，但假设您有：

1).具有 id="dialog" 属性的（隐藏）div，例如：

<div id="dialog" style="display:none">
    <h3>Inline Content</h3>
    <p>Lorem Ipsum</p>
    <p>more inline content</p>
</div>

2).锚点 <a> 标记作为具有 id="test" 属性的元素的后代，如 :

<div id="test">
    <a href="javascript:;" >some link here</a>
</div>

注意您还可以使用此委托形式将 <a> 的 #test 后代元素作为目标：

jQuery(document).ready(function ($) {
    $("#test").on('click', 'a', function () {
        $.fancybox({
            type: "inline",
            href: "#dialog"
        });
    });
}); // ready

... 而不是将 click 事件绑定到整个 document.

Fancybox 按功能显示内联内容

Fancybox to show inline content by function

jquery

fancybox-2