如何以编程方式触发带有内联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或更高版本,请参阅此答案

对于旧版本:

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

$('#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>

:)

Answer 2

其他答案需要更新

因为我正在使用接受的答案代码而且半个小时都在挠头.

在最新的FancyBox 3中,他们更改了一些选项名称以及如何使用某些方法.

有关如何打开内联元素的旧版本:

$.fancybox({ // OUTDATED
    href: '#element-id', 
    modal: true
});

需要改变

$.fancybox.open({ // FancyBox 3
    src: '#element-id', 
    modal: true
});

注意open方法和href-> src的更改.

没有打开你会得到一个fancybox不是一个功能错误.如果没有"src",您将无法加载弹出的请求内容.

希望这可以帮助别人避免同样的错误,我们确实需要遵循这个文件.过时的情况要困难得多.

Answer 3

你可以做:

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