Question

When a user clicks an link to an external site, how can I display a modal pop-up window for a few seconds (indicating that it’s redirecting to an external site) and then open the link in a new window.

I’m already using JQuery UI dialogs. Preferably, I don’t want to have modify the HTML (ie. to create a dialog as JQuery UI dialog requires) but would like pure JQuery/JS solution, which will create/inject the dialog
and display it.

My attempt so far:

$('a[rel=external]').click(
    function(event)
    {   
        event.preventDefault();
        $('#redirectDialog').dialog('open').delay(2000);
        $('#redirectDialog').dialog('close');
        window.open(this.href);
        return false;
    }
);

Unfortunately, the dialog doesn’t show up – it opens the link in a new window immediately.

Any help to get the dialog displaying, a brief pause, and then closing down and then opening the link, and help in creating the dialog on the fly would be greatly appreciated.

Answer 1

Why not use an explicit timeout? Something like this:

$('a[rel=external]').click(function(event) {
    event.preventDefault();
    $('#redirectDialog').dialog('open');

    var href = this.href;
    setTimeout(function() {
        $('#redirectDialog').dialog('close');
        window.open(href);
    }, 2000);
    return false;
});

You use setTimeout to get your delay and then do your window.open in the setTimeout callback.