페이지의 모든 하이퍼 링크 클릭에 대한 Jquery 모달 대화 상자

Question

내 프로젝트에서 모든 하이퍼 링크 클릭에 대한 모달 대화 상자를 표시해야하는 페이지가 있습니다.

팝업에는 두 개의 버튼 이미지 "계속"과 "GoBack"이 있습니다. 나는이 Stackoverflow 웹 사이트에서 찾은 몇 가지 jquery를 썼다. 그러나 코드에 문제가 있습니다.

이 페이지에는 5 개의 하이퍼 링크가 있다고 가정합니다. 첫 번째 링크를 클릭하면 대화 상자가 열리 며 클릭하면 링크가 제대로 열립니다.

그러나 두 번째 링크를 클릭하면 첫 번째 링크와 두 번째 링크가 다시 열립니다. 둘째 링크는 두 번째 링크 만 열어야합니다.

세 번째 링크를 다시 클릭하면 첫 번째, 두 번째 및 세 번째 링크가 3 개의 창에서 열립니다.

내 코드에서 약간의 실수를하고있는 것 같습니다. 누구든지이 문제를 해결하는 데 도움이된다면 정말 고맙습니다.

미리 도움을 주셔서 감사합니다. 내 jquery 코드는 다음과 같습니다.

<script type="text/javascript"> 
<!-- Loading Modal Dialog Popup--> 
$(document).ready(function() { 
    // $(".leaving-the-site-container").hide(); 
    $(".linkdialog").click(function(e){ 
     e.preventDefault();        
     var targetUrl = $(this).attr("href");      
     alert(targetUrl); 

     $(".leaving-the-site-container").dialog({   
      width:452, 
      // autoOpen:false, 
      // height:225, 
      modal:true, 
      closeOnEscape:false, 
      draggable:false, 
      scrollbars:false, 
      position: ["center", 240] 
     });              

     $("#btnContinue").click(function(){        
      window.open(targetUrl); 
      $(".leaving-the-site-container").dialog("close");                   
     }); 
     $("#btnTakeMeBack").click(function(){ 
      $(".leaving-the-site-container").dialog("close"); 
     }); 
    }); 
}); 
</script> 

Answer 1

코드가 잘못되었습니다. 이게 작동 할 겁니다 :

$(document).ready(function() { 

$(".linkdialog").click(function(e){ 
    e.preventDefault(); 
    $('.linkdialog').removeClass('selected'); 
    $(this).addClass('selected');        
    $('.leaving-the-site-container').dialog('open'); 
}); 

$(".leaving-the-site-container").dialog({   
    width:452, 
    modal:true, 
    closeOnEscape:false, 
    draggable:false, 
    scrollbars:false, 
    position: ["center", 240], 
     open: function() { 
    $("#btnContinue").click(function(){        
     window.open($('.selected').attr('href'));          
     $(".leaving-the-site-container").dialog("close");                   
     }); 
      $("#btnTakeMeBack").click(function(){ 
     $(".leaving-the-site-container").dialog("close"); 
    }); 
    } 
}); 
});