On the click of a button, I'm trying to show a simple hidden div in a fancy box. This is the code that works:
$("#btnForm").fancybox({ content: $("#divForm").html() });
But from what I've read, this doesn't seem to be the standard way to accomplish this. I've tried each of the following, unsuccessfully:
$("#btnForm").fancybox({ href: "#divForm" });
$("#btnForm").click(function () {
$.fancybox({ href: "#divForm" });
});
$("#btnForm").click(function () {
$("#divForm").fancybox();
});
Can someone point me in the right direction on how to properly use this utility? Here's my 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>
This question is related to
javascript
jquery
fancybox
padde's solution is right, but risen up another problem i.e.
As said by Adam (the questioner) that it is showing empty popup. Here is the complete and working solution
<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>
I use approach with appending "singleton" link for element you want to show in fancybox. This is code, what I use with some minor edits:
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();
}
Additional explanation: If you show fancybox with "content" option, it will duplicate DOM, which is inside elements. Sometimes this is not OK. In my case I needed to have the same elements, because they were used in form.
Simple: e.g. if div id 'mydiv'
jQuery.fancybox.open({href: "#mydiv"});
This also makes JS code functional which is inside div.
You just use this and it will be helpful for you
$("#btnForm").click(function (){
$.fancybox({
'padding': 0,
'width': 1087,
'height': 610,
'type': 'iframe',
content: $('#divForm').show();
});
});
For users coming back to this post long after the initial answer was accepted, it may pay off to note that now you can use
data-fancybox-href="#"
on any element (since data is an HTML-5 accepted attribute) to have the fancybox work on say an input form if for some reason you can't use the options to initiate for some reason (like say you have multiple elements on the page that use fancybox and they all share a similar class you call fancybox on).
You could use:
$('#btnForm').click(function(){
$.fancybox({
'content' : $("#divForm").html()
});
};
Source: Stackoverflow.com