單擊超鏈接後顯示jQuery對話框

Question

我想在用戶單擊超鏈接後顯示對話框。如果用戶在對話框中按下繼續，則瀏覽器必須轉到超鏈接。如果用戶按下取消，則應取消超鏈接的點擊。

該鏈接在href-attribute中應該有一個真實的url，不應該使用錨點。

如何使用jquery完成此操作？

Answer 1

使用jQuery中的.click()處理器和.preventDefault。例如： -

$('a').click(function(event) { 
    var answer= confirm('Do you really want to go there?'); 
    if(!answer){ 
    event.preventDefault(); 
    } 
}); 

Answer 2

我會去像這樣的東西：

<a href="mylink.html" id="dialogLink">Link</a> 

，並使用（使用jQuery）unobstrusive的javascript：

var link = $('#dialogLink'); 
link.click(function() 
{ 
    $(this).dialog({ 
     buttons: 
     { 
      "Ok": function() 
      { 
       $(this).dialog('close'); 
       window.location.href = link.attr('href'); 
      } 
     } 
    }); 

    return false; 
}); 

您刪除通過javascript中的鏈接，只有在用戶點擊了對話框中的「確定」按鈕是更改了窗口位置。

Answer 3

您可以使用這裏找到http://plugins.jquery.com/project/jqDialog

<a href="foo.com" id="bar">bar</a> 

$(document).ready(function(){ 
    $("a#bar").click(function(){ 
    href = $("a#bar").attr("href") 
    jqDialog.confirm("Are you sure want to click either of these buttons?", 
     function() { window.location=href; }, // callback function for 'YES' button 
     function() { return; }    // callback function for 'NO' button 
    ); 
    return false; 
    }); 
});