CODEWITHSUNDEEP
javascriptjqueryoverlayjquery-tools
Donnie Thomas
Donnie Thomas

Reputation: 4038

jQuery Overlay: Closing current overlay and opening another?

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?

Upvotes: 1

Views: 2359

Answers (2)

Donnie Thomas
Donnie Thomas

Reputation: 4038

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

Upvotes: 1

Jimmy Sawczuk
Jimmy Sawczuk

Reputation: 13614

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.

Upvotes: 1

Related Questions