Fancybox.close() on an iframe
i am using the latest fancybox (2.0.4) and i created a fancybox for an iframe. the content is displayed correctly. i add a "close" button to my html which is displyed within the iframe. i wish that the close button will have the same result as clicking the "x" on the right top corner of the fancybox. i am familiar with FancyBox iframe returns parent.$ as undefined (using WordPress), and my parent is a DOM object with nothing in it. also tried
window.parent.jQuery.fancybox.close();
window.parent.jQuery.fn.fancybox.close();
parent.jQuery.fn.fancybox.close();
parent.jQuery.fancybox.close();
any help?
UPDATE:
a.js (linked to the a.html)
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
type : 'iframe',
openEffect : 'none',
closeEffect : 'none',
afterClose : function() {
window.location.reload();
}
});
});
a.html
<a class="fancybox fancybox.iframe" id="newLink" href="new.html">link</a>
how can i have a button within new.html that closes the fancybox iframe window
UPDATE: a complete html files
a.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
type : 'iframe',
openEffect : 'none',
closeEffect : 'none',
afterClose : function() {
window.location.reload();
}
});
});
</script>
</head>
<body>
<a class="fancybox fancybox.iframe" id="newLink" href="b.html">link</a>
</body>
</html>
b.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
</head>
<body>
<input type="submit" value="Cancel" id="cancelBtn" onclick="parent.jQuery.fancybox.close()"/>
</body>
</html>
Answer
Your manual close button should look like:
<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>
UPDATE: you should use the onsubmit on the <form> tag, not on the button image so in your "new.html" set something like
<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">
UPDATE #2: see working demo page
UPDATE #3: I have decided to remove all my additional comments to this answer since the discussion became too long and took us nowhere. I let the code and a link to a working demonstration if this can help somebody else though.