jquery - 如何以编程方式触发带有内联 div 的 fancybox？

Question

我想让当有人尝试提交表单时出现一个 fancybox。所以我得到了这个:

$('#login-form').submit(function(e) {
    $.fancybox({
        content: '<h2>Hello Fancybox</h2>',
        modal: true
    });
    return false;
});

效果很好，但我宁愿使用我的 div，也不愿尝试指定内容字符串中的所有 HTML。我可以用这个让它弹出

<div style="display:none" id="access-policy">
blah blah blah
</div>

相反？

Answer 1

对于 FancyBox v3 或更高版本，请参阅 this answer

对于旧版本:

您需要在 href 属性中设置 div ID。如果您在 content 属性中使用 $('#access-policy').show() ，那么您第二次打开此 fancybox 时将不会显示任何内容。

$('#login-form').submit(function(e) {
    $.fancybox({
        href: '#access-policy', 
        modal: true
    });
    return false;
});

HTML 中还必须是:

<div style="display:none">
    <div id="access-policy">
        blah blah blah
    </div>
</div>

:)