2013-07-29 1 views
2

fancybox 버전 2.1.5에서 최신 버전을 사용하고 있습니다. 팬시 박스를 열면 .fancybox-wrap div가 .fancybox-overlay div 안에 있음을 알게되었습니다. 같은 페이지에서 다른 fancybox를 열면 .fancybox-overlay div가 .fancybox-wrap div의 바깥쪽에 있습니다. 이전 페이지를 닫은 후 페이지에서 다른 fancybox 열기

는 제 1 및 제 2 fancybox의 나의 정의는 동일하고 같은은 다음과 같습니다

$.fancybox({ 
    href  : '#my_div', 
    autoSize : true, 
    fitToView : false, 
    padding  : 0, 
    fixed  : true, 
    autoCenter : false, 
    topRatio : 0.5, 
}); 

을 .fancybox - 랩 사업부가 .fancybox 오버레이 DIV 안에 있으면 내가 할 때, 페이지를 스크롤 fancybox 내용이 fancybox 만 스크롤하면 배경 내용이 정적으로 유지됩니다.

그러나 fancybox와 내용을 스크롤 할 때 .fancybox-overlay 외부에있을 때 스크롤됩니다.

어떻게 페이지가 뒤쪽으로 이동하지 못하게합니까?

이 질문에서 DEMO을 검사하면 랩 div가 fancybox 웹 사이트의 데모와 비교하여 오버레이 div 밖에 있습니다.

+0

$ .fancybox.close();를 실행해야합니까? 다음 fancybox를 열기 전에? – Neil

+0

첫 번째 파일이 자동으로 닫히기 때문에'$ .fancybox.close();'를 실행할 필요가 없습니다. – JFK

답변

1

먼저 (내 데모)에서 참조한 DEMO은 fancybox v2.0.6을 사용합니다. 그 이후로 상황이 바뀌 었습니다.

둘째, .fancybox-wrap 사업부는 내부 또는 .fancybox-overlay 외부에 있다는 사실은 헬퍼 오버레이 상태에 따라 달라집니다

기본 값이 같은 true입니다 : 그래서

helpers: { 
    overlay : { 
     locked: true 
    } 
} 

... .fancybox-wrap div는 입니다. 내부 번호.fancybox-overlay div입니다. 당신이 사용자 정의 스크립트에 false에 값을 설정하면 다른 한편으로

, 다음 .fancybox-wrap 사업부는 OUTSIDE .fancybox-overlay DIV 될 것입니다.

공지 사항 두 번째 경우 (false)에는 fancybox 뒤에 페이지를 스크롤 할 수 있습니다. v2.1.5 GitHub의에

+1

첫 번째 fancybox http://jsfiddle.net/ZbJsJ/11/에서 다른 fancybox를 열면이 기능이 작동하지 않습니다. 2 개의 모달 상자 1과 2가 있습니다. 잠긴 상태에서 modal1을 열면 배경이 고정 된 채로 유지됩니다. 그러나 modal1 내부에서 modal2를 열면 배경이 스크롤됩니다. modal1과 modal2는 모두 동일한 fancybox 정의를가집니다. 왜 modal2가 열릴 때 페이지가 스크롤됩니까? 또한 모달 2가 열리면 .wrap div가 오버레이 div 외부에 있습니다. true – Neil

+1

@Neil : 당신이 방금 버그를 발견했음을 두려워합니다. [issue # 672] (https://github.com/fancyapps/fancyBox/issues/672)를 열었습니다. – JFK

0

사용

DEMO는 FancyBox의 저자는 문제가 해결되었는지 확인합니다 FancyBox 3 베타를 시도하는 것이 좋습니다. 그것은 (이 댓글을 쓰는 시점에서) 나에게 황금 시간대에 대한 준비가 느껴지지 않는, 그래서 나는 다음과 같은 방법으로 버그를 해결했습니다 내가 잠 오버레이 을 사용하고

beforeShow : function() { 
    // Move the wrap manually into overlay 
    $(".fancybox-wrap").appendTo(".fancybox-overlay"); 

    // Add the missing classes to <html> 
    $("html").addClass("fancybox-margin fancybox-lock"); 
}, 

을 : 사실autoCenter : false 배경을 잠그고 원하는 위치로 이동합니다.페이지 아래로 낮은 아약스 내용으로 FancyBoxes을 열 때

마지막으로, FancyBox는 CSS를 최고 값을 다시 설정하지 않는 것 같다 내가 콜백에 jQuery를 사용하여 오버라이드 (override) 할 수 없습니다, 그래서 나는이 강제로 해결 FancyBox의 CSS는 :

.fancybox-opened {z-index: 8030; top: 20px !important;} 

이 페이지 아래로 어느 시점에서 뷰포트의 상단에서 모든 FancyBoxes 제 1 및 이후의 사람, 20 픽셀을 엽니 다.

관련 문제