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）。带有div属性的（隐藏）id="dialog"，如：

<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>的{​​{1}}后代元素：

#test

...而不是将jQuery(document).ready(function ($) { $("#test").on('click', 'a', function () { $.fancybox({ type: "inline", href: "#dialog" }); }); }); // ready 事件绑定到整个click。