jQuery Overlay：关闭当前覆盖并打开另一个？

发布于 2024-10-31 12:52:34 字数 639 浏览 6 评论 0原文

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

现在点击“为什么加入？”。这将启动另一个覆盖层，其中有一个“立即注册”链接。单击它会打开之前的叠加层。

现在问题来了。您会注意到，两个叠加层都有“曝光”选项，该选项显示它们时屏幕的其余部分变暗。当两者独立打开时，效果很好。但是，当我从“为什么加入？”中启动注册叠加层时，未显示公开效果。另外，在覆盖层外部单击也不起作用。

这是代码：

/*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 覆盖中的错误？

原文

Please have a look at beta.gulfdine.com. You will see a "Sign in" link. Clicking on it launches a jQuery overlay.

Now click on "Why Join?". This launches another overlay, within which there is a 'Sign up now' link. Clicking on it opens the previous overlay.

Now here's the problem. You'll note that both overlays have the 'expose' option, which shows them with the rest of the screen darkened. This works fine when both are opened independently. However, when I launch the sign up overlay from within "Why Join?", the expose effect is not shown. Also clicking outside the overlay doesn't work.

Here is the code:

/*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();
});

Is this because of something I'm doing wrong, or is this a bug in jQuery overlay?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅气尐潴 2024-11-07 12:52:34

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

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

这确保 close 函数在 load 函数开始之前完成，换句话说，确保操作同步。正如我所说，您可能需要创造性地将回调传递给 close 函数：它可能需要 JSON 名称说明符，或者可能需要提前定义。如果您找不到方法来做到这一点，则这是库的限制，您可以添加或找出替换方法。

The issue is that that fadeOut animation isn't being allowed to finish before the new modal is loaded. I poked around the documentation a bit and couldn't find a way to pass a callback to the close() function, but you'll need to find some way to do that. When that happens, your code will look something like this:

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

This ensures that the close function is done completing before the load function begins, in other words, ensures that the actions are synchronous. Like I said though, you may need to be creative in how that callback gets passed to the close function: it may require a JSON name specifier or it may need to be defined ahead of time. If you can't find a way to do that, it's a limitation of the library that you can either add in or figure out a way to replace.

回复收藏 0 原文

年华零落成诗 2024-11-07 12:52:34

吉米对于错误原因的判断似乎是正确的。

事实证明，需要修改一个内置值才能使其工作，正如我在 jQuery 工具论坛中发现的那样： 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 */

Jimmy seems to have been on the right track about the cause of the error.

It turns out that there is an inbuilt value that needs to be modified in order to make this work, as I found out in the jQuery Tools forums: http://flowplayer.org/tools/forum/40/41903

The modified code now looks like this:

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 */

回复收藏 0 原文

~没有更多了~