3

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?

user3515612
  • 149
  • 1
  • 1
  • 11

1 Answers1

1

First: in your markup you link to map.html, not popup.html.
Secondly, try window.parent.$.fancybox.close().

Alex
  • 9,911
  • 5
  • 33
  • 52