title: Close a jQuery fancybox does not work
body: <p>I am using jQuery fancybox v2 and I am having problems to implement a link that closes the fancybox popup.</p>
  
  <p>I got 2 pages:</p>
  
  <ul>
  <li>page.html  (contains the link that opens the fancybox popup.)</li>
  <li>popup.html (contains the content of the fancybox popup.)</li>
  </ul>
  
  <p>Source of page.html:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript" src="/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" /&gt;
      &lt;script type="text/javascript"&gt;
      $(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'
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;a class="fancyboxpopup" href="popup.html" data-fancybox-type="iframe"&gt;open the popup&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      function closePopup() {
          // do something on parent (page.html)
          // ...
          // close the current popup window 
          $.fancybox.close();
      }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;a href="#" onClick="closePopup()"&gt;Close popup window&lt;/a&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>According to the fancybox API you use "<strong>$.fancybox.close()</strong>" to close the popup. Unfortunately, nothing happens if I click on the link. It seems that <em>$.fancybox</em> can not be found.
  I also tried "<strong>document.parent.$.fancybox.close()</strong>" which does not work either.</p>
  
  <p>Any idea what I might do wrong here?</p>