Fancybox 关闭现有弹出窗口

Question

我正在使用 Fancybox 3 来显示 3 个项目。他们都 link 一起使用 gallery 属性，像这样：

<!-- 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>

在每个项目中，有一个注册 link，link 到一个单独的弹出窗口。单击时，这会在已打开的图库项目中打开另一个 fancybox window。如何在触发另一个实例之前关闭前一个实例？我宁愿他们不筑巢。

我已经在我的 JS 中试过了，但它不起作用：

( function( $ ) {
    $('[data-fancybox]').fancybox({
        closeExisting: true,
        loop: true
    });
} )( jQuery )

Answer 1

您的代码段工作正常 - https://codepen.io/anon/pen/oPEXQj?editors=1010

请确保您使用的是最新版本，因为 closeExisting 选项从 v3.4.0

开始可用

顺便说一句，您应该将 data-src="signup" 替换为 data-src="#signup" 以加载内联内容

Answer 2

基本解决方案

您的问题的解决方案是：

<div style="display: none;" id="gallery-1">
  <h2>Title 1 - Make this screen much bigger ****************************</h2>
  <p>  <a data-fancybox data-src="#signup" onclick='$.fancybox.close()' href='#'">Sign me up</a></p>
</div>

参考：close fancy box from function from within open 'fancybox'

工作示例：

https://jsfiddle.net/euo4byj2/15/

工作代码：

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>


<div style="display: none;" id="signup">
  <h2>SIGN UP 1</h2>
  <p>Content</p> 
</div>



<!-- Item 1 -->
<a data-fancybox="gallery" data-src="#gallery-1" href="javascript:;">
  Open Me
</a>

<div style="display: none;" id="gallery-1">
  <h2>Title 1 - Make this screen much bigger ****************************</h2>
  <p>  <a data-fancybox data-src="#signup" onclick='$.fancybox.close()' href='#'">Sign me up</a></p>
</div>

<!-- Item 2 -->
<a data-fancybox="gallery" data-src="#gallery-2" href="javascript:;">
  Open Me
</a>

<div style="display: none;" id="gallery-2">
  <h2>Title 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>Title 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>


<script>

/* ( function( $ ) {
    $('[data-fancybox]').fancybox({
        closeExisting: true,
        loop: true
    });
} )( jQuery );
 */

</script>

Fancybox 关闭现有弹出窗口

Fancybox close existing popup

javascript

fancybox

fancybox-3

基本解决方案

工作示例：

工作代码：