Временное модальное всплывающее окно jquery для указания перенаправления на внешний сайт

Question

Когда пользователь нажимает ссылку на внешний сайт, как я могу отображать модальное всплывающее окно в течение нескольких секунд (указывая, что он перенаправляется на внешний сайт), а затем открывать ссылку в новом окне.

Я уже использую диалоги пользовательского интерфейса JQuery. Предпочтительно, я не хочу изменять HTML (т. Е. Создавать диалог, как того требует диалог JQuery UI), но хотел бы иметь чистое решение JQuery / JS, которое будет создавать / вставлять диалог и отобразить его.

Моя попытка до сих пор:

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

К сожалению, диалоговое окно не отображается - оно сразу открывает ссылку в новом окне.

Будем весьма благодарны за любую помощь в отображении диалогового окна, короткую паузу, затем закрытие и последующее открытие ссылки, а также помощь в создании диалога на лету.

Answer 1

Почему бы не использовать явное время ожидания?Примерно так:

$('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;
});

Вы используете setTimeout, чтобы получить задержку, а затем делаете window.open в setTimeout обратном вызове.

Answer 2

Вы не должны использовать window.open (). Вместо этого используйте Window.location.href = URL; он загрузит этот URL в том же окне

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