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

改为什么？

- mpen

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>

:)

- Marçal Juan

---

我们如何从变量动态更改 href: '#access-policy'？ - Wasim A.

@Wasim 这是一个字符串，请在那里放置您想要的选择器 :) - Marçal Juan

答案已过时。有关新的fancybox版本，请参见下面的@Michael的答案。 - T.Todua

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不是函数”错误。如果没有“src”，则会出现“请求的内容无法加载”弹窗。

希望这可以帮助某人避免犯我同样的错误，我们确实需要遵循文档说明。这样做要困难得多才会过时。

- Michael Shang

---

如果你想要一个关闭按钮，只需要删除 modal: true 选项。 - jim smith

这适用于Fancybox 2或3：$.fancybox.open($(''#element-id")); - Daniel

Answer 3

您可以做：

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

- Naftali

---

答案已过时。有关新的fancybox版本，请参见下面的@Michael的答案。 - T.Todua

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>

否则将不会出现任何内容；它不会改变显示属性。

- mpen

---

或者你可以这样做：$('#login-form').submit(function(e) { $.fancybox({ content: $('#access-policy').show(), modal: true }); return false; });，并且仍然保留原始的div。 - Naftali

Answer 5

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

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

- amit_g

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'
    });
});

Iframe:

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

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

- Ronald

---

答案已过时。有关新的fancybox版本，请参见下面的@Michael的答案。 - T.Todua