外部サイトへのリダイレクトを示すタイムアウトjqueryモーダルポップアップ

Question

ユーザーが外部サイトへのリンクをクリックすると、モーダルポップアップウィンドウを数秒間表示すると（外部サイトにリダイレクトしていることを示す）、次にリンクを新しいウィンドウで開きます。

私はすでにJQuery UIダイアログを使用しています。できれば、私は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

はなぜ明示的なタイムアウトを使用しないで同じウィンドウにそのURLをロードしますか？あなたの遅延を得るためにsetTimeoutを使用し、setTimeoutコールバックであなたのwindow.openを行う

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

：このような何か。

Answer 2

あなたは、window.open（）を使うべきではない代わりにWindow.location.href = URLを使用します。。それは

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