I am using jQuery fancybox v2 and I am having problems to implement a link that closes the fancybox popup.
I got 2 pages:
- page.html (contains the link that opens the fancybox popup.)
- popup.html (contains the content of the fancybox popup.)
Source of page.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancyboxpopup").fancybox({
iframe: {
preload: false
},
scrolling: 'yes',
padding: 20,
width: 800,
height: 800,
maxWidth: 1000,
maxHeight: 1000,
fitToView: false,
width: '80%',
height: '100%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
</script>
</head>
<body>
<div>
<a class="fancyboxpopup" href="popup.html" data-fancybox-type="iframe">open the popup</a>
</div>
</body>
</html>
On the fancybox popup I would like to have a close link that does some javascript (modifies some content on page.html) and closes the popup when clicked. Source of popup.html:
<html>
<head>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
function closePopup() {
// do something on parent (page.html)
// ...
// close the current popup window
$.fancybox.close();
}
</script>
</head>
<body>
<a href="#" onClick="closePopup()">Close popup window</a>
</body>
</html>
According to the fancybox API you use "$.fancybox.close()" to close the popup. Unfortunately, nothing happens if I click on the link. It seems that $.fancybox can not be found. I also tried "document.parent.$.fancybox.close()" which does not work either.
Any idea what I might do wrong here?