Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Close a jQuery fancybox does not work [duplicate]

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?

like image 388
user3515612 Avatar asked Mar 11 '26 14:03

user3515612


1 Answers

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

like image 61
Alex Avatar answered Mar 14 '26 02:03

Alex



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!