javascript - Fancybox - 是否可以使用 javascript 变量字符串作为 HTML 内容？

Question

我知道 Fancybox 的说明指出内容可以通过四种方式中的任何一种传递；图像、内联、iFrame 或 Ajax。

但是我想知道我是否有一个像这样的字符串:

var html = "<p>Some html content</p>";

我是否可以使用此内容调用 fancybox 窗口？

编辑关于下面肯尼迪的回答，根据条件提供内容的最佳方式是什么？例如，假设我有两个不同的 fancybox 链接:

<a href="#" class="fancybox class-one">Click me</a>
<a href="#" class="fancybox class-two">Click me</a>

那么当单击任一链接时，我想根据第二个类名显示不同的内容？

Answer 1

是的，这是可能的。您还可以将 html 设置为 content 的 type，这样应该可以工作

var html = "<p>Some html content</p>";
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type: "html", // not an image but html
        content: html // overrides fancybox content
    });
}); // ready

注意，API 选项 content 会覆盖 fancybox content，无论 中设置了什么 anchor 的 href 属性绑定(bind)到 fancybox，所以这个

<a class="fancybox" href="images/01.jpg">Open Fancybox</a>

...仍将显示 fancybox 中 javascript 变量的值，而不是 href 中的图像

参见JSFIDDLE

<小时/>

编辑:

根据选择器的类提供内容，如

<a href="#" class="fancybox class-one">Click me</a>
<a href="#" class="fancybox class-two">Click me</a>

...我认为最好的选择是使用 switch 语句(在 .on() 方法内)动态设置 的值html 变量。然后以编程方式启动 fancybox，如下所示:

var html; // initialize variable globally
jQuery(document).ready(function ($) {
    $(".fancybox").on("click", function () {
        switch (this.className) {
            case "fancybox class-one":
                html = "<p>Some html content for class-one</p>";
                break;
            case "fancybox class-two":
                html = "<p>And this the html content for class-two</p>";
                break;
            default:
                html = "<p>html default content</p>";
        };
        $.fancybox({
            type: "html",
            content: html
        });
        return false; 
    });
}); // ready

参见 fork JSFIDDLE