使用Fancybox显示div
使用Fancybox显示div
提问于 2012-03-19 03:30:53
在单击一个按钮时，我试图在一个花哨的框中显示一个简单的隐藏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>回答 6
Stack Overflow用户
回答已采纳
发布于 2012-03-19 03:58:44
据我所知，输入元素可能没有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>Stack Overflow用户
发布于 2012-03-19 03:36:04
您可以使用：
$('#btnForm').click(function(){
$.fancybox({
'content' : $("#divForm").html()
});
};Stack Overflow用户
发布于 2015-04-26 23:48:04
对于在最初的答案被接受很久之后才回到这篇文章的用户来说，注意到现在你可以使用
data-fancybox-href="#" 在任何元素上(因为data是HTML-5接受的属性)来让fancybox工作，例如，如果由于某种原因，您不能使用选项来启动输入表单(例如，假设页面上有多个使用fancybox的元素，并且它们都共享一个您调用fancybox的类似类)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9761538
复制相关文章
相似问题