使用 iframe 实现 Fancybox答案

【问题标题】：Implementing Fancybox with iframe使用 iframe 实现 Fancybox
【发布时间】：2014-09-07 04:17:26
【问题描述】：

我正在尝试建立一个网站并且非常新手我正在尝试建立一个网站并且非常新手我正在尝试建立一个网站并且非常新手我正在尝试建立一个网站并且非常新手

<iframe frameborder="none" src="20140905-8ebc/form.php" allowTransparency="true" style="position:relative;width:480px;height:600px;border:none;"></iframe>

    <a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>

    <script>
        $(document).ready(function() {
            $('.fancybox').fancybox();
        });
    </script>

</div>

【问题讨论】：

标签： javascript php jquery iframe fancybox

【解决方案1】：

你不需要创建 iframe 标签，fancybox 会。我不知道您使用的是哪个版本的 fancybox，所以这里是两者的代码示例。

版本 1.x (http://fancybox.net/howto)

用一个告诉fancybox打开iframe的类创建一个锚标记

<a class="iframe fancybox" href="20140905-8ebc/form.php">Open form</a>

或者，使用 URL 本身

<a class="fancybox" href="20140905-8ebc/form.php?iframe">Open form</a>

版本 2.x (http://fancyapps.com/fancybox/#docs)

创建一个带有自定义数据属性的锚标记，告诉fancybox打开一个iframe

<a class="fancybox" data-fancybox-type="iframe" href="20140905-8ebc/form.php">Open form</a>

fancybox 为您创建 iframe 的事实意味着您将无法直接控制 iframe 属性，但我认为您在 fancybox 中不需要它们。您可以将影响fancybox 显示方式的选项传递给fancybox。有太多无法列出，但它们在上面的链接中有很好的记录。这是指定它们的方法：

$(".fancybox").fancybox({
    option  : value,
    option2 : value2
});

【讨论】：