其他答案需要更新

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。如果您在$('#access-policy').show()属性中使用content，则第二次打开此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-＆gt; src更改。

如果没有打开你会得到一个fancybox不是一个功能错误。如果没有“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

这演示了如何在不需要<a href>链接元素的情况下使用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'
    });
});

<强> I帧：

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

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

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

6 个答案:

其他答案需要更新