두 번째 클릭시 Fancybox v2가 실패 함

Question

Fancybox v2의 ajax 옵션을 사용하여 도움말, 연락처 정보 등의 특정 정보를 표시하는 사이트가 있습니다. 그러나 문제가있는 곳을 발견했습니다. 첫 번째 클릭에는 문제가 없지만 후속 클릭에는 일반적으로 오작동이 발생합니다. 실제 팝업 창이 잠깐 나타난 다음 사라지거나 전혀 표시되지 않을 수 있으며 오버레이가 두 번 또는 세 번로드되어 여러 번 클릭하여 지울 수 있습니다 그것.

동일한 링크 또는 Fancybox를 사용하는 다른 링크를 클릭해도 상관 없습니다. Firebug 콘솔은 오류를보고하지 않습니다. 페이지를 새로 고침하면 신뢰할 수있는 또 하나의 클릭이 발생하고 후속 클릭은 이상한 행동을 다시 보입니다.

나는 충돌을 일으키는 것이 있는지보기 위해 다른 모든 스크립트를 제거한 우리 페이지 중 하나의 잘린 버전을 만들었지 만, 그렇지 않은 것 같습니다. 사이트의 오른쪽 상단에있는

http://frontandback.com.au/fancytest/

세 개의 링크가 Fancybox 그들에게 적용된 : 당신은 여기에서 모습을 가질 수 있습니다. 예 :

<ul> 
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li> 
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">Help</a></li> 
    <li><a href="index.html" data-fancybox-href="index.html #main" target="_blank" class="fancybox fancybox.ajax">FAQs</a></li> 
</ul> 

이 이상한 문제를 일으키는 원인에 대한 제안이 있으면 크게 감사하겠습니다.

건배.

Answer 1

this post 나는 ajax를 통해 파일의 부분적인 내용을로드 할 수있는 수정 된 버전을 만들었습니다.

이 새로운 버전은 우리가이

<li><a href="index.html" data-segment="#contact" target="_blank" class="fancybox">Contact us</a></li> 

... 통지를 할 수 있습니다 URL의 hash을 통과 그래서 대신이

<li><a href="index.html" data-fancybox-href="index.html #contact" target="_blank" class="fancybox fancybox.ajax">Contact us</a></li> 

을 수행하기 위해 (HTML5) data- 속성을 사용 우리는 특별한 팬시 박스 fancybox.ajax 또는 fancybox.iframe을 코멘트 섹션에서 제안한 바대로 사용하지 않습니다.

그런 기본적인 스크립트

$(".fancybox").on("click", function() { 
    targetContent = $("<div />").load(this.href +" "+ $(this).data("segment")); 
    $.fancybox(targetContent, { 
     fitToView: false, 
     autoSize : false, 
     width: 420, // or whatever 
     height: 280 
    }); // fancybox 
    return false; // prevent default 
}); // on 

당신은 style="" 속성을 통해 원격 파일에서 각 <div>에 크기를 설정할 수 있습니다, 다음 autoSize : true을 설정하고 동적 크기를 얻기 위해 width 및 height 옵션을 제거합니다.

물론

, 당신의 세 링크 각각에 대한 revised DEMO