Question

我有以下代码在页面加载时打开一个fancybox：

<script>
window.jQuery(document).ready(function() {
    $.fancybox.open('#popup_success_strain_add');
});
</script>

如何立即添加将示例重定向到google.com的onclose事件？

提前致谢。

Answer 1

我建议使用href选项指定要在FancyBox中打开的元素，＆＃34;覆盖内容源链接＆＃34;。然后，使用afterClose回调来执行执行JavaScript重定向的函数。

文档中并不完全清楚，但您可以使用href选项以与代码中相同的方式指定选择器字符串。下面，我已将该方法与afterClose回调一起使用。

不会从堆栈代码段执行重定向，但我还提供了一些输出＆＃34; Redirect＆＃34;为了示范而到页面。

＆＃13;

$(function() {
  $.fancybox({
    href: '#popup_success_strain_add',
    afterClose: function() {
      $('div#output').text('Redirect.');
      //window.location = 'http://www.google.com/';
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div id="popup_success_strain_add">This is the contents.</div>
<div id="output"></div>

＆＃13;

修改

另一种方法是在指定fancybox()回调的同时在特定的jQuery对象（所选元素）上调用afterClose，然后触发＆＃34;单击＆＃34;打开它。

＆＃13;

$(function() {
  $('#popup_success_strain_add').fancybox({
    afterClose: function() {
      jQuery('div#output').text('Redirect.');
      //window.location = 'http://www.google.com/';
    }
  }).trigger('click');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div id="popup_success_strain_add">This is the contents.</div>
<div id="output"></div>

＆＃13;

修改

为了在第一个关闭时打开一个新的fancybox，我不得不使用setTimeout添加一点延迟。奇怪的是，这是必要的，因为回调被称为＆＃34; 在关闭后＃34; ...但似乎有效。

＆＃13;

$(function() {
  $.fancybox({
    href: '#popup_error_activate',
    afterClose: function() {
      setTimeout(function() {
        $.fancybox.open('#inline1');
      }, 100);
    }
  });
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div id="popup_error_activate" class="hidden">First Box.</div>
<div id="inline1" class="hidden">Second Box.</div>

＆＃13;

单击关闭时的Fancybox事件

1 个答案:

修改

修改