title: Fancybox close existing popup
body: <p>I'm using <a href="http://fancyapps.com/fancybox/3" rel="nofollow noreferrer">Fancybox 3</a> to display 3 items. They all link together using the gallery attribute, like so:</p>
  
  <pre><code>&lt;!-- Item 1 --&gt;
  &lt;a data-fancybox="gallery" data-src="#gallery-1" href="javascript:;"&gt;
    Open Me
  &lt;/a&gt;
  
  &lt;div style="display: none;" id="gallery-1"&gt;
    &lt;h2&gt;Gallery 1&lt;/h2&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;a data-fancybox data-src="signup" href="javascript:;"&gt;
  &lt;/div&gt;
  
  &lt;!-- Item 2 --&gt;
  &lt;a data-fancybox="gallery" data-src="#gallery-2" href="javascript:;"&gt;
    Open Me
  &lt;/a&gt;
  
  &lt;div style="display: none;" id="gallery-2"&gt;
    &lt;h2&gt;Gallery 2&lt;/h2&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;a data-fancybox data-src="signup" href="javascript:;"&gt;
  &lt;/div&gt;
  
  &lt;!-- Item 3 --&gt;
  &lt;a data-fancybox="gallery" data-src="#gallery-3" href="javascript:;"&gt;
    Open Me
  &lt;/a&gt;
  
  &lt;div style="display: none;" id="gallery-3"&gt;
    &lt;h2&gt;Gallery 3&lt;/h2&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;a data-fancybox data-src="#signup" href="javascript:;"&gt;
  &lt;/div&gt;
  
  &lt;!-- Signup --&gt;
  &lt;div style="display: none;" id="signup"&gt;
    &lt;h2&gt;Signup&lt;/h2&gt;
    &lt;p&gt;Sign up form goes here&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Within each item, there's a signup link which links to a separate popup. When clicked, this opens another fancybox window within the already open gallery item. How do I close the previous instance before triggering another? I'd rather they didn't nest.</p>
  
  <p>I've tried this within my JS, but it doesn't work:</p>
  
  <pre><code>( function( $ ) {
      $('[data-fancybox]').fancybox({
          closeExisting: true,
          loop: true
      });
  } )( jQuery )
  </code></pre>