在单击一个按钮时,我试图在一个花哨的框中显示一个简单的隐藏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-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>
发布于 2012-03-19 03:36:04
您可以使用:
$('#btnForm').click(function(){
$.fancybox({
'content' : $("#divForm").html()
});
};
发布于 2015-04-26 23:48:04
对于在最初的答案被接受很久之后才回到这篇文章的用户来说,注意到现在你可以使用
data-fancybox-href="#"
在任何元素上(因为data是HTML-5接受的属性)来让fancybox工作,例如,如果由于某种原因,您不能使用选项来启动输入表单(例如,假设页面上有多个使用fancybox的元素,并且它们都共享一个您调用fancybox的类似类)。
https://stackoverflow.com/questions/9761538
复制相似问题