使用Fancybox展示一个div

Question

使用Fancybox展示一个div

18

$("#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>

- Adam Rackis

7个回答

12

Padde的解决方案是正确的，但引出了另一个问题，即

正如Adam（提问者）所说，它显示为空白弹出窗口。这里是完整且可行的解决方案。

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

- wakqasahmed

1

你的答案更好。我只想为其他新手补充一点，在Fancybox 2中名称已经改变了。'afterLoad': function() { $("#divForm").css("display","block"); }, 'afterClose': function() { $("#divForm").css("display","none"); } - borayeris

2

感谢指出onStart和onClosed。这应该添加到所选答案中。 - Avatar

感谢提供额外的开始和结束部分。这解决了初始时盒子为空的问题。 - The Unknown Dev

6

您可以使用以下方法：

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

- aurbano

那只是我之前已经有的更长版本。我认为使用href配置属性会有一种更直接的方法来获取这个。 - Adam Rackis

当然，你可以简单地使用 $("#btnForm").click(function () { $("#divForm").fancybox(); });。 - aurbano

我已经尝试过那个了。那是我尝试失败的版本之一。 - Adam Rackis

$.fancybox({ 'content' : $("#divForm").html() }); 无法加载fancybox的外部CSS。 - user2822316

@aurbano 在你的答案最后加上 ')'，然后再加上最后一个 ';'。 - Alex

3

对于在初始答案被接受后长时间返回此帖子的用户，值得注意的是现在您可以使用

data-fancybox-href="#"

在任何元素上（因为data是HTML-5接受的属性），您可以使用fancybox，例如在输入表单上进行操作，如果由于某种原因无法使用选项来启动（比如说您在页面上有多个使用fancybox的元素，它们都共享一个类名，您都要调用fancybox）。

- Daemedeor

2

简单粗暴：例如，如果是 div id 'mydiv'。

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

这也使得位于 div 内部的 JS 代码具有功能性。

- Azghanvi

你的解决方案非常简单 :) - l00k

1

我使用一种方法，在要在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。有时这是不可取的。在我的情况下，我需要拥有相同的元素，因为它们用于表单中。

- Marat Gallyamov

1

你只需要使用这个，它会对你有帮助。

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

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

});

- Syed Amir Bukhari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patrick Oscity · Accepted Answer

据我所知，输入元素可能没有“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>

点击此处前往 JSBin 查看演示