Question

点击一个按钮，我试图在一个花哨的盒子里显示一个简单的隐藏div。这是的代码：

$("#btnForm").fancybox({ content: $("#divForm").html() });

但是从我所读到的内容来看，这似乎并不是实现这一目标的标准方法。我尝试了以下各项，但未成功：

$("#btnForm").fancybox({ href: "#divForm" }); $("#btnForm").click(function () { $.fancybox({ href: "#divForm" }); }); $("#btnForm").click(function () { $("#divForm").fancybox(); });

有人能指出我正确使用此实用程序的方向吗？这是我的HTML：

<input type="button" value="Load Form" id="btnForm" /> <div id="divForm" style="display:none"> <form action="tbd"> File: <input type="file" /><br /><br /> <input type="submit" /> </form> </div>

Answer 1

据我所知，输入元素可能没有href属性，这是Fancybox获取有关内容的信息的地方。以下代码使用a元素而不是input元素。此外，这就是我所谓的“标准方式”。

<html>
<head>
  <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>

<a href="#divForm" id="btnForm">Load Form</a>

<div id="divForm" style="display:none">
  <form action="tbd">
    File: <input type="file" /><br /><br />
    <input type="submit" />
  </form>
</div>

<script type="text/javascript">
  $(function(){
    $("#btnForm").fancybox();
  });
</script>

</body>
</html>

See it in action on JSBin

Answer 2

padde的解决方案是正确的，但又出现了另一个问题，即

正如亚当（提问者）所说的那样显示空弹出。这是完整且有效的解决方案

<html>
<head>
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>

<a href="#divForm" id="btnForm">Load Form</a>

<div id="divForm" style="display:none">
    <form action="tbd">
        File: <input type="file" /><br /><br />
        <input type="submit" />
    </form>
</div>

<script type="text/javascript">
$(function() {
    $("#btnForm").fancybox({
        'onStart': function() { $("#divForm").css("display","block"); },            
        'onClosed': function() { $("#divForm").css("display","none"); }
    });
});
</script>

</body>
</html>

Answer 3

您可以使用：

$('#btnForm').click(function(){
    $.fancybox({
            'content' : $("#divForm").html()
        });
};

Answer 4

对于在接受初始回答很久之后回到此帖子的用户，可能会注意到现在可以使用

data-fancybox-href="#"

在任何元素上（因为数据是HTML-5接受的属性）让fancybox工作，如果由于某种原因你不能出于某种原因使用选项来启动输入表单（比如说你有页面上使用fancybox的多个元素，它们都共享一个类似于你调用fancybox的类。

Answer 5

简单：例如如果div id＆＃39; mydiv＆＃39;

jQuery.fancybox.open({href: "#mydiv"});

这也使得JS代码在div中运行。

Answer 6

我使用方法为你要在fancybox中显示的元素附加“singleton”链接。这是代码，我使用的一些小编辑：

function showElementInPopUp(elementId) {
    var fancyboxAnchorElementId = "fancyboxTriggerFor_" + elementId;
    if ($("#"+fancyboxAnchorElementId).length == 0) {
        $("body").append("<a id='" + fancyboxAnchorElementId + "' href='#" + elementId+ "' style='display:none;'></a>");
        $("#"+fancyboxAnchorElementId).fancybox();
    }

    $("#" + fancyboxAnchorElementId).click();
}

补充说明：如果您使用“content”选项显示fancybox，它将复制DOM，这是内部元素。有时这不行。在我的情况下，我需要有相同的元素，因为它们是以形式使用的。

Answer 7

你只需使用它，它对你有帮助

$("#btnForm").click(function (){

$.fancybox({
    'padding':  0,
    'width':    1087,
    'height':   610,
    'type':     'iframe',
    content:   $('#divForm').show();
        });

});

用Fancybox显示div

7 个答案: