Question

请查看beta.gulfdine.com。您将看到“登录”链接。单击它会启动jQuery叠加层。

现在点击“为何加入？”。这将启动另一个叠加层，其中有一个“立即注册”链接。单击它将打开上一个叠加层。

现在问题就在于此。你会注意到两个叠加层都有'expose'选项，它会在屏幕的其余部分变暗时显示它们。这两个都是独立打开时工作正常。但是，当我从“Why Join？”中启动注册覆盖时，不会显示曝光效果。另外在叠加层外单击也不起作用。

以下是代码：

/*Overlays*/
var whyJoinOverlay = $("a.whyJoin[rel]").overlay({ expose: '#000', top: 'center', api: true });
var loginLinks = $("a.loginLinks[rel]").overlay({ expose: '#000', top: 'center', api: true });

$("a.callToAction").click(function (e) {
    e.preventDefault();
    whyJoinOverlay.close();
    loginLinks.load();
});

这是因为我做错了什么，或者这是jQuery叠加中的错误？

Answer 1

问题是在加载新模式之前不允许fadeOut动画完成。我稍微探讨了文档，找不到将回调传递给close()函数的方法，但是你需要找到一些方法来做到这一点。当发生这种情况时，您的代码将如下所示：

$("a.callToAction").click(function (e) {
    e.preventDefault();
    whyJoinOverlay.close(function()
    {
        loginLinks.load();
    });
});

这确保close函数在load函数开始之前完成，换句话说，确保操作是同步的。就像我说的那样，你可能需要对回调如何传递给close函数有创意：它可能需要一个JSON名称说明符，或者可能需要提前定义。如果您找不到这样做的方法，那么您可以添加或找出替换方法，这是库的限制。

Answer 2

吉米似乎已经走上了正确的错误原因。

事实证明，有一个内置值需要修改才能使其工作，正如我在jQuery Tools论坛中发现的那样：http://flowplayer.org/tools/forum/40/41903

修改后的代码现在看起来像这样：

var whyJoinOverlay = $("a.whyJoin[rel]").overlay({
    top: 'center',
    api: true, 
    mask: {
        color: "#000",
        loadSpeed: 0,
        closeSpeed:0,//this is REQUIRED for the next overlay to work
        opacity: 0.9
        } 
});

var loginLinks = $("a.loginLinks[rel]").overlay({ expose: '#000', top: 'center', api: true });
/* No longer any need for the $("a.callToAction").click() function */

jQuery Overlay：关闭当前叠加层并打开另一个叠加层？

2 个答案: