Question

I’ve implemented the nyroModal jQuery Plugin into my website.
I have set up a javascript file that configures a nyroModal Windows:

$("a.nyroModal").nyroModal({

    bgColor: '#000',

    width: 680,

    height: 500

});

Now, the opened nyroModal window need a link where I can close the nyroModal window and thereafter redirect to a specific page.

I created a close and redirect link:

<a onclick="parent.$.nyroModalRemove(); window.parent.location.href = 'user/login';
return false;" href="#">log in</a>

However, the window is redirected before nyroModal is closed – which doesn’t look nice.
I want to implement a call back, but I don’t know how to do this.

Answer 1

Create a function to call from your onclick, like:

<a onclick="nyroModalRedirect('user/login');" href="#">log in</a>

Then create that function that calls the .close() function, then runs a timeout before calling the redirect:

function nyroModalRedirect(url) {
    // Initialize timeout for hovering over group to load child districts when moving a school
    var timeout = null;
    var clear = function() {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
    }

    // Close modal (this is pulling the 'topmost' modal instance, but if you only have one, like my login form, it works a charm :)
    $.nmTop().close();
    clear();
    // Start timeout after closing modal
    timeout = setTimeout(function() {   
        // Redirect to passed URL after timeout occurs
        window.location.href = url;
    }, 500);
}

Enjoy 🙂