I'm using Fancybox 3 to display 3 items. They all link together using the gallery attribute, like so:
<!-- Item 1 -->
<a data-fancybox="gallery" data-src="#gallery-1" href="javascript:;">
Open Me
</a>
<div style="display: none;" id="gallery-1">
<h2>Gallery 1</h2>
<p>Content</p>
<a data-fancybox data-src="signup" href="javascript:;">
</div>
<!-- Item 2 -->
<a data-fancybox="gallery" data-src="#gallery-2" href="javascript:;">
Open Me
</a>
<div style="display: none;" id="gallery-2">
<h2>Gallery 2</h2>
<p>Content</p>
<a data-fancybox data-src="signup" href="javascript:;">
</div>
<!-- Item 3 -->
<a data-fancybox="gallery" data-src="#gallery-3" href="javascript:;">
Open Me
</a>
<div style="display: none;" id="gallery-3">
<h2>Gallery 3</h2>
<p>Content</p>
<a data-fancybox data-src="#signup" href="javascript:;">
</div>
<!-- Signup -->
<div style="display: none;" id="signup">
<h2>Signup</h2>
<p>Sign up form goes here</h2>
</div>
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.
I've tried this within my JS, but it doesn't work:
( function( $ ) {
$('[data-fancybox]').fancybox({
closeExisting: true,
loop: true
});
} )( jQuery )