Question

我正在尝试使用javascript设置网站和非常新手。我很擅长HTML和CSS。我需要设置一个精美的盒子，以便在单击时显示iframe表单。我现在有表格工作，但不知道如何让它在一个精美的盒子/灯箱工作。我完全没有信心这样做，这让我无法完成这个网站:(

表单效果很好，只是不能把它变成一个奇特的盒子。（表单链接到我的Web服务器上的php文件，使其工作）。我已经在我的网站上实现了精美的盒子，但无法在其中获得iframe，只有图片。

这是我到目前为止的代码：

<<div class="client">
<div class="perfectiontodesigncsstextbox">
    <div class="perfectiontodesigncsstextboxheading"> Title <br> </div>
    <div class="perfectiontodesigncsstextboxbody"> 
    Body
</div>
</div>  



<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>

Answer 1

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

版本1.x（http://fancybox.net/howto）

创建一个带有类的锚标记，该类告诉fancybox打开iframe

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

或使用网址

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

使用iframe实现Fancybox

1 个答案: