如何以编程方式触发带有内联 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。如果您在 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>

:)

Answer 2

其他答案需要更新，

因为我正在使用已接受的答案的代码，并且挠了半个小时。

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

关于如何打开内联元素的旧版本：

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

需要更改为

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

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

如果没有 open，您将得到一个 fancybox is not a function 错误。如果没有“src”，您将收到无法加载请求的内容的弹出窗口。

希望这可以帮助某人避免我同样的错误，我们确实需要遵循此文档。要想过时就更难了。

Answer 3

你可以这样做：

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

Answer 4

没关系。 content 可以是 jquery 对象：

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

但是 div 必须包裹在隐藏的 div 中，

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

否则什么也不会出现；它不会更改显示属性。

Answer 5

内容是“任何 HTML”，因此从 Div 获取 HTML 并将其提供给内容

content: $('#access-policy').html(),

Answer 6

这演示了如何在不需要 链接元素的情况下使用 fancybox。

内联 (1.3.4)：

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'content': '#dialogContent'
    });
});

内联 (2.1.5)：

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'href': '#dialogContent'
    });
});

Iframe：

<div id="menuitem" class="menuitem"></div>

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});