jquery模式對話框確認 - 新窗口乘法

我試圖避免使用jquery-ui或簡單模態或任何插件。jquery模式對話框確認 - 新窗口乘法

我之後的功能是點擊任何外部鏈接，顯示隱藏的div，其中包含yes和no按鈕。如果用戶點擊是，那麼他們被帶到一個新窗口。

我的問題是，這幾乎工作，除了如果用戶返回到原來的頁面，如果他們再次點擊鏈接，然後相同的鏈接打開在兩個標籤，如果你重複鏈接打開三個標籤等。 ..

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

這裏是發生了什麼http://jsbin.com/apekik/7

來源

2011-09-08 mikefosbrook

該鏈接被點擊每一次，函數的示例再次調用n。每次調用此函數時，live會在所有鏈接上註冊另一個回調，因此當用戶最終點擊「確定」時，將重複調用window.open函數。此外，fadeOut被多次調用，但效果只是隱藏的，因爲它正在消失。

所以，我們把代碼.ok，.close和.cancel向鏈接的點擊投手之外，並改變live到click，它應該是罰款。

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

來源

2011-09-08 20:07:47

謝謝馬克花時間研究這個問題並指出重複函數。您的解決方案沒有像預期的那樣工作，因爲鏈接引用了當前頁面而不是外部鏈接本身。我仍然需要將所有其他功能與點擊相關聯。我沒有太多改變我的代碼，並通過在.live（）之前添加.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

來源

2011-09-09 09:54:19 mikefosbrook

jquery模式對話框確認 - 新窗口乘法

回答

相關問題