4

我有 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>

第一个 Fancybox 在页面加载时被激活..

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

我希望能够在第一个fancybox关闭时打开第二个fancybox。或者..通过单击第一个按钮打开第二个。

这是如何实现的？恐怕我没有太多运气绑定到事件。

——李

更新 ：

使用 callbackOnClose 可以让我做一些简单的事情，比如 alert('hi')，但我还没有设法打开另一个 Fancybox。

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

3 回答 3

6

好的，我终于让它工作了（我第一次遇到fancybox）。似乎callbackOnClose是在关闭时调用，而不是在关闭后调用。因此，直到第一个fancybox 完全关闭后，第二个fancybox 才会弹出。

诀窍？使用计时器延迟打开第二个。这绝不是完美的答案，如果计时器设置得太短，可能会表现得很奇怪，如果设置得太长，则不理想。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>
于 2009-11-12T00:20:15.093 回答
2

这是为fancyBox 1.3+ 准备的。为了最有效地使用@okw 提出的timeOut 技巧，我们需要知道fancyBox 的fadeOut 需要多少时间。通过新的 onClosed 函数，我们可以使用 currentOpts 参数。

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

这样你就不会遇到@okw 指出的覆盖问题

于 2011-10-22T16:03:56.473 回答
0

这是我发现的解决方法，

花式盒版本：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');
于 2015-05-18T06:16:22.367 回答