Fancybox "이 사이트에서 나가기"팝업

Question

childrens 모바일 사이트에 대한 fancybox 팝업을 만들려고합니다.

그것은 단지이 링크는 외부 웹 사이트 링크를 계속하거나 내가 할 수 있었던 유일한 해결책을 fancybox를 닫고 페이지

로 돌아 제시

외부 링크가 표시됩니다

...

<a id="external" href="#external-block">Go to external link</a> 

<div style="display:none"> 
<div id="external-block"> 
<h2>Warning</h2> 
<p>Hey, you're leaving this site <p> 
<a href="onclick="$.fancybox.close();">Return</a> 
<a href="http://actuallink">Leave the site</a> 
</div> 

와 JS에서 지금까지 각 링크에 대해이 같은 것을 사용하고 찾을 수

$(document).ready(function() { 
    $("a#external").fancybox(); 
}); 

하지만 각 링크마다 중복됩니다. 나는 페이지에있는 링크가 외부 있는지 감지하는 대신 js 함수를 갖는 방법을 찾고 싶습니다. 그리고 URL로 이동하는 대신 href를 잡고 (즉, 각 링크에 대해 숨겨진 div가 없는지 확인합니다.) 해당 URL로 이동하거나 돌아갈 메시징 fancybox 팝업.

Answer 1

fancybox를 사용하고 있습니까? 이것은 아마도 그것 없이는 더 간단 할 수 있습니다.

라이트 박스로 작동하는 숨겨진 고정 요소 하나를 만들어 링크를 클릭 할 때마다 상자를 표시 할 수 있습니다. 닫기 버튼을 사용하여 상자를 숨기려면 고유 한 기능을 추가해야하지만 충분해야합니다. 당신이 제안을 fancybox 페이딩 효과 후 경우

$('a[href^="http://"], a[href^="https://"]').click(function(e) { 
    // This is used to override the default event and 
    // stop the browser from redirecting the user to the url. 
    e.preventDefault(); 

    // Set the href for the #external_link element inside the lightbox 
    // to the one from the anchor tag that was clicked on. 
    $("#lightbox #external_link").attr("href", $(this).attr("href")); 

    // Show the light-box 
    $("#lightbox").show(); 
}); 

, 내가 권하고 싶습니다 조금 시간을내어 :

는 단순히 같은 것을 할 것이 새로운 라이트 박스 내부의 외부 링크를 설정하려면 CSS transitions에서 읽을 수 있습니다.

Answer 2

모든 a 요소에 이벤트 처리기를 설정하고 외부 링크인지 확인한 다음 fancybox 창을 열 수 있습니다. 뭔가 같이 :

$("a").on("click", function(e) {  
    if ($(this).attr("href").indexOf("http://")>-1 
     || 
     $(this).attr("href").indexOf("https://")>-1) 
    { 
     e.preventDefault(); 
     e.stopPropagation(); 
     message = "<div>This site opens in a new window<br/>" + 
        "<input type=\"button\" value=\"Continue\" " + 
        "onclick=\"location.href='"+$(this).attr("href")+"';\">"+ 
        "</div>"; 
     $.fancybox(message); 

    } 
}); 

는 바이올린의 버튼을 차단하므로 외부 링크가 작동하지 않습니다,하지만 코드 작동하고 "계속" http://jsfiddle.net/6nfWJ/