하이퍼 링크를 클릭 한 후 jquery 대화 상자 표시

Question

사용자가 하이퍼 링크를 클릭하면 대화 상자를 표시하고 싶습니다. 사용자가 대화 상자에서 계속을 누르면 브라우저가 하이퍼 링크로 이동해야합니다. 사용자가 취소를 누르면 하이퍼 링크의 클릭이 취소됩니다.

링크에는 href 속성에 실제 URL이 있어야하며 엥커는 사용하지 않아야합니다.

어떻게 이것을 Jquery를 사용하여 수행 할 수 있습니까?

Answer 1

.click() 처리기와 .preventDefault을 jQuery에 사용하십시오. 예컨대 :

$('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> 

을 그리고, unobstrusive 자바 스크립트 (jQuery를 사용)를 사용하여 :

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

    return false; 
}); 

당신은 자바 스크립트를 통해 링크를 제거하고 오직 사용자가 클릭하면 대화 상자의 'OK'버튼은 창 위치가 변경된 것입니다.

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