jQuery Overlay : 현재 오버레이를 닫고 다른 오버레이를 여는 중입니까?

Question

beta.gulfdine.com을 살펴보십시오. '로그인'링크가 표시됩니다. 그것을 클릭하면 jQuery 오버레이가 시작됩니다.

이제 "왜 가입 하시겠습니까?"를 클릭하십시오. 그러면 '지금 가입하기'링크가있는 다른 오버레이가 실행됩니다. 이것을 클릭하면 이전 오버레이가 열립니다.

이제 문제가 있습니다. 두 오버레이 모두 화면의 나머지 부분이 어둡게 표시된 '노출'옵션이 있음을 알 수 있습니다. 이 두 가지를 독립적으로 열 때 잘 작동합니다. 그러나 "왜 가입합니까?"에서 가입 오버레이를 시작하면 노출 효과가 표시되지 않습니다. 오버레이 외부를 클릭해도 작동하지 않습니다.

/*Overlays*/ 
var whyJoinOverlay = $("a.whyJoin[rel]").overlay({ expose: '#000', top: 'center', api: true }); 
var loginLinks = $("a.loginLinks[rel]").overlay({ expose: '#000', top: 'center', api: true }); 

$("a.callToAction").click(function (e) { 
    e.preventDefault(); 
    whyJoinOverlay.close(); 
    loginLinks.load(); 
}); 

때문에 어떤이는 내가 잘못인가, 또는이 jQuery를 오버레이의 버그 : 여기

코드인가?

Answer 1

지미가 오류의 원인에 대해 제대로 된 것처럼 보입니다.

그것은 내가 jQuery를 도구 포럼에서 발견이 작업을하기 위해 수정 될 필요가있는 붙박이 값이 있다는 것을 밝혀 : http://flowplayer.org/tools/forum/40/41903

수정 된 코드는 이제 다음과 같습니다

var whyJoinOverlay = $("a.whyJoin[rel]").overlay({ 
    top: 'center', 
    api: true, 
    mask: { 
     color: "#000", 
     loadSpeed: 0, 
     closeSpeed:0,//this is REQUIRED for the next overlay to work 
     opacity: 0.9 
     } 
}); 

var loginLinks = $("a.loginLinks[rel]").overlay({ expose: '#000', top: 'center', api: true }); 
/* No longer any need for the $("a.callToAction").click() function */ 

Answer 2

새로운 모달을로드하기 전에 fadeOut 애니메이션을 끝내지 못하는 것이 문제입니다. 내가 문서를 조금 찔러서 close() 함수에 콜백을 전달할 수있는 방법을 찾지 못했지만, 그렇게 할 수있는 방법을 찾아야합니다. 그렇게되면, 코드는 다음과 같이 표시됩니다

$("a.callToAction").click(function (e) { 
    e.preventDefault(); 
    whyJoinOverlay.close(function() 
    { 
     loginLinks.load(); 
    }); 
}); 

이것은 load 기능이 시작되기 전에 close 기능 즉, 완료 수행되는 것을 보장 조치가 동기화되도록합니다. 앞서 말한 것처럼함수에 콜백이 전달되는 방식을 창의적으로 만들어야 할 수도 있습니다. JSON 이름 지정자가 필요할 수도 있고 미리 정의해야 할 수도 있습니다. 그렇게 할 수있는 방법을 찾을 수 없다면, 라이브러리를 추가하거나 교체 할 수있는 한계가 있습니다.