거대한 자바스크립트 라이브러리 없이 Netflix 스타일의 iframe 오버레이를 어떻게 만들 수 있나요?

Question

별도의 팝업 창 대신 링크를 사용하여 오버레이를 열려고 합니다.이 오버레이는 전체 화면을 클릭하는 것을 차단하는 반투명 div 레이어로 구성되어야 합니다.또한 이 시점에서 스크롤을 비활성화하는 것을 목표로 합니다.메인 페이지의 어디에 있든 관계없이 링크를 클릭하면 오버레이가 화면의 X 및 Y 원점 중앙에 있어야 합니다.이 오버레이 div 내부에는 3가지 크기의 콘텐츠를 로드할 수 있도록 구성된 iframe이 있어야 합니다.­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

내가 작성한 이전 JS lib를 확인하고 싶을 수도 있습니다. 하위 모달.

이해하고 수정하기 쉽습니다.시내로 가세요 ;)

수정한 후 사용하세요. 작게 하다 서버의 gzip과 함께 사용됩니다.lib 크기는 매우 작습니다.

Answer 2

섀도우박스 인라인 "팝업"을 위한 훌륭한 스크립트입니다.jQuery, Prototype 등을 사용하는 경우 일반적인 JS 라이브러리와 함께 작동하거나 자체적으로 작동할 수 있으며 매우 포괄적인 스키닝 시스템을 갖추고 있으므로 소스 코드 자체에 들어가지 않고도 모양을 조정할 수 있습니다.
이것은 또한 내가 시도한 유일한 스크립트(수십 개가 있음)로서 모든 일반적인 브라우저에서 안정적으로 작동합니다.

스크롤을 비활성화하지는 않지만(어두운 오버레이를 통해 일반 페이지 배경 스크롤을 계속 볼 수 있음) "팝업"은 어떤 경우에도 화면에 고정된 상태로 유지됩니다.

Answer 3

http://onehackoranother.com/projects/jquery/boxy/

jQuery.boxy는 또 다른 훌륭하고 가벼운 모달 대화 상자 플러그인입니다.

Answer 4

나는 보통 사용한다 ThickBox 이를 위해.사용자가 JS를 활성화하지 않으면 정말 잘 작동하고 성능이 저하됩니다.

jQuery를 사용하지만 Google에서 로드할 수 있습니다. http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js 캐싱의 이점을 얻을 수도 있습니다.

Answer 5

자바스크립트를 잡아라 내선 도서관.모달 오버레이에 대한 기능이 있습니다.

Answer 6

ThickBox(더 이상 개발되지 않음)는 나를 매우 잘 작동하는 것으로 보이는 다음 라이브러리로 안내했습니다.

http://fancybox.net