我如何在另一个关闭后打开一个花哨的盒子？

Question

我有2个花哨的盒子，并且正在尝试从第一个开始打开第二个（按按钮或关闭第一个）。

<div id="firstFancybox" style="display:none">
   <p>I'm the first Fancybox!</p>
   <a id="fancyboxButton" href="#secondFancybox">Close first Fancybox</a>
</div>

<a id="hiddenLink" href="#firstFancybox"></a>

<div id="secondFancybox" style="display:none">
   <p>I'm the second Fancybox!</p>
</div>

第一个花式盒正在页面加载中激活。

$(document).ready(function() {
    $("a#hiddenLink").fancybox({ 'hideOnContentClick': false, 'frameWidth': 300, 'frameHeight': 300 }).trigger('click');
    $("a#fancyboxButton").fancybox();
    });

每当第一个关闭时，我都希望能够打开第二个花式箱。或..通过单击第一个按钮打开第二个。

这是如何实现的？恐怕我对事件的约束力没有太多的运气。

- 李

更新 ：

使用callbackonclose允许我做简单的事情，例如警报（'hi'），但我还没有设法打开另一个花哨的盒子。

    $(document).ready(function() {
        $("a#hiddenLink").fancybox({ 'hideOnContentClick': false, 'frameWidth': 300, 'frameHeight': 300, 
        callbackOnClose: function() { alert('hi'); } 
        }).trigger('click');
    });

Answer 1

好的，我终于让它开始工作（我第一次与Fancybox相遇）。看起来 callbackOnClose 在关闭时被称为关闭。因此，直到第一个完全关闭后，第二个花哨的盒子才能弹出。

诀窍？通过使用计时器延迟第二个开放。这绝不是完美的答案，如果计时器设置得太短，则可能会奇怪，如果设置太长，则不理想。 100ms对我有用。这是代码。

脚本：

$(document).ready(function() {
    $("a#hiddenLink").fancybox({ 'hideOnContentClick': false, 'frameWidth': 300, 'frameHeight': 300, 
      callbackOnClose: function() { window.setTimeout('open2()',100); } 
    }).trigger('click');
});
function open2(){
    $("a#fancyboxButton").fancybox().trigger('click');
}

html：

<div id="firstFancybox" style="display:none">
   <p>I'm the first Fancybox!</p>
   <a href="#" onclick="open2();">Close first Fancybox</a>
</div>
<a id="hiddenLink" href="#firstFancybox"><!--for first fancy box--></a>
<a id="fancyboxButton" href="#secondFancybox"><!--for second fancy box--></a>

Answer 2

这是适合1.3+的Fancybox。为了最有效地使用@OKW支撑的超时技巧，我们需要知道花式盒的淡入时间将花费多少时间。有了新的闭合函数，我们可以使用CurrentOpts参数。

$("a[rel='fancy1']").fancybox({
    onClosed: function(currentArray, currentIndex, currentOpts){
        setTimeout(function(){$("a[rel='fancy2']").click();},currentOpts.speedOut);
    }
});

这样，您将不会有@okw指向的覆盖问题

Answer 3

这是我发现的解决方法，

Fancybox版本：2

$("#first_fancybox_link").fancybox({        
    afterClose:function(){  
        $("#second_fancybox_link").fancybox({ 
            helpers:  {
                overlay : null
            },
            afterShow:function(){   
                $.fancybox.helpers.overlay.open({parent: $('body')});
            }
        }).trigger('click');
    }
}).trigger('click');