Jquery 모달 대화 상자 확인 - 새 창이 곱합니다.

Question

jquery-ui 또는 단순 모달 또는 모든 플러그인 사용을 피하려고합니다.

나는 외부 링크를 클릭하면 예와 아니오 버튼이 포함 된 숨겨진 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(); 
}); 

..

<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> 

는 능의 링크를 클릭 할 때마다 http://jsbin.com/apekik/7

Answer 1

을 무슨 일이 일어나고 있는지의 예입니다 n이 다시 호출됩니다. 함수가 호출 될 때마다 live은 모든 링크에 또 다른 콜백을 등록하므로 사용자가 마침내 "확인"을 클릭하면 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

감사합니다.이 부분을 살펴보고 반복되는 기능을 지적 해 주셔서 감사합니다. 링크가 외부 링크 자체가 아닌 현재 페이지를 참조하기 때문에 솔루션이 의도 한대로 제대로 작동하지 않았습니다. 다른 모든 기능을 클릭과 연결해야했습니다. 내 코드를 너무 많이 변경하지 않았고 언급 한 반복 기능을 방지하는 .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