Jqueryモーダルダイアログの確認 - 新しいウィンドウの乗算

Question

jquery-uiまたはシンプルモードまたはプラグインの使用を避けようとしています。

私が行った機能は、外部リンクをクリックすると、yesとnoのボタンが含まれている隠しdivが表示されます。ユーザーが「はい」をクリックすると、新しいウィンドウが表示されます。

私の問題は、ユーザーがリンクを再度クリックすると元のページに戻り、同じリンクが2つのタブで開き、3つのタブなどでリンクが繰り返される場合を除いてほぼ同じですここでは...

<div id="overlay"> 
<div class="decoration">    
      <div class="overlay-content"> 
       <a href="#" class="close">X</a> 
       <h1>You are now leaving the website</h1> 
       <p>This link will take you to a website where this Privacy Policy does not apply.</p> 
       <p><strong>Select OK to continue.</strong></p> 
       <a href="#" class="ok">OK</a> 
       <a href="#" class="cancel">CANCEL</a> 
      </div> 
     </div> 

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function (event) { 

    var href_ext = $(this).attr("href");        

    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});  

    $('#overlay .ok').live('click', function() {   
     window.open(href_ext); 
     $('#overlay').hide(); 
     return false; 
    }); 
    $('#overlay .close, #overlay .cancel').live('click', function() {      
     $('#overlay').fadeOut(500);   
    }); 
    event.preventDefault(); 
}); 

functio、http://jsbin.com/apekik/7

Answer 1

にリンクがクリックされるたびに何が起こっているかの例です。 nが再び呼び出されます。関数が呼び出されるたびに、liveはすべてのリンクに別のコールバックを登録するので、ユーザーが最後に「OK」をクリックすると、window.open関数が繰り返し呼び出されます。さらに、fadeOutは複数回呼び出されていますが、効果はただ隠れているので、うんざりしてしまいます。

そこで、我々は、リンクのクリックハンドラの外に.ok、.closeと.cancelのためのコードを移動し、clickにliveを変更し、それは問題ないはずです。

$('#overlay .ok').click(function (event) { 
    var href_ext = $(this).attr("href");   
    window.open(href_ext); 
    $('#overlay').hide(); 
    return false; 
}); 

$('#overlay .close, #overlay .cancel').click(function() {      
    $('#overlay').fadeOut(500);   
}); 

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").click(function (event) { 
    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});  
    event.preventDefault(); 
}); 

Answer 2

ありがとうございましたこれを調べて繰り返し機能を指摘してくれたことを感謝します。リンクが外部リンクそのものではなく現在のページを参照しているため、ソリューションが意図したとおりに機能しませんでした。他のすべての機能をクリックと関連付ける必要がありました。私はあまりにも多くのコードを変更していないし、.lie（）の前に.die（）を追加することで解決しました。

$("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function (event) { 
event.preventDefault(); 

    var href_ext = $(this).attr("href");         

    $('#overlay').fadeIn(500).css({'position':'fixed', 'top':'0px'});  

    $('#overlay .ok').die().live('click', function() {   
     window.open(href_ext); 
     $('#overlay').hide(); 
     return false; 
    }); 

    $('#overlay .close, #overlay .cancel').click(function() {      
     $('#overlay').fadeOut(500);   
    }); 
}); 

作業溶液：http://jsbin.com/apekik/14