用Fancybox显示div

点击一个按钮，我试图在一个漂亮的盒子中显示一个简单的隐藏div。这是代码，工程：用Fancybox显示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>

来源

2012-03-18 Adam Rackis

据我所知，一个input元素可能没有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"> 
    $("#btnForm").fancybox(); 
</script> 

</body> 
</html>

See it in action on JSBin

来源

2012-03-18 19:58:43

嗯，好吧+1，因为它看起来更接近我需要的东西，但由于某些原因，fancybox显示空白。在控制台中没有错误，代码看起来很适合我。我们两个都没有看到类型吗？ – 2012-03-18 20:18:44

我添加了一个完整的工作示例，至少它适用于我（带Safari和Firefox的OSX） – 2012-03-18 20:58:49

该代码不适用于Fancybox 1.3，但使用更新的版本可以完美地工作。谢谢。 – 2012-03-18 21:01:35

你可以使用：

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

来源

2012-03-18 19:36:04 aurbano

这只是我已有的更长版本。我认为有一个更直接的方式来获得这个，使用href配置属性 – 2012-03-18 19:39:26

真的，你可以简单地使用'$（“＃btnForm”）。click（function（）{（“＃divForm”）。fancybox（）; }）;' – aurbano 2012-03-18 19:41:38

我也试过。这是我尝试失败的版本之一。 – 2012-03-18 19:51:42

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>

来源

2013-05-02 08:44:43 wakqasahmed

你的回答比较好。我只想为Fancybox 2上的其他新手添加名称更改。 'afterLoad'：function（）{$（“＃divForm”）.css（“display”，“block”）; }， 'afterClose'：function（）{$（“＃divForm”）。css（“display”，“none”）; } – borayeris 2014-05-16 15:46:36

感谢您指出'onStart'和'onClosed'。这应该被添加到选定的答案。 – 2014-07-17 15:00:28

感谢您的额外开始和结束部分。它解决了盒子最初是空的问题。 – 2016-02-01 16:10:30

我使用的方法与追加“单身”链接，你想的fancybox显示元素。这是代码，我有一些小的修改使用：

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

附加说明：如果你表现出与“内容”选项的fancybox，它会复制DOM，这是内部的元素。有时候这不行。在我的情况下，我需要有相同的元素，因为它们在表单中使用。

来源

2014-01-17 18:40:30

你只需要使用这一点，它会有助于您

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

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

});

来源

2014-05-07 05:15:14

简单：例如如果div id'mydiv'

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

这也使得JS代码功能在div内。

来源

2015-01-19 16:45:21 Azghanvi

您的解决方案非常简单:) – l00k 2017-11-25 23:45:18

对于用户回来这个帖子早在最初的回答被接受后，就可以还清注意，现在你可以在任何元素上使用

data-fancybox-href="#"

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

来源

2015-04-26 15:48:04 Daemedeor

谢谢，作品完美 – OnengLar 2017-09-01 09:42:26

用Fancybox显示div

回答

相关问题