거대한 자바스크립트 라이브러리 없이 Netflix 스타일의 iframe 오버레이를 어떻게 만들 수 있나요?
-
01-07-2019 - |
문제
별도의 팝업 창 대신 링크를 사용하여 오버레이를 열려고 합니다.이 오버레이는 전체 화면을 클릭하는 것을 차단하는 반투명 div 레이어로 구성되어야 합니다.또한 이 시점에서 스크롤을 비활성화하는 것을 목표로 합니다.메인 페이지의 어디에 있든 관계없이 링크를 클릭하면 오버레이가 화면의 X 및 Y 원점 중앙에 있어야 합니다.이 오버레이 div 내부에는 3가지 크기의 콘텐츠를 로드할 수 있도록 구성된 iframe이 있어야 합니다.
다른 팁
섀도우박스 인라인 "팝업"을 위한 훌륭한 스크립트입니다.jQuery, Prototype 등을 사용하는 경우 일반적인 JS 라이브러리와 함께 작동하거나 자체적으로 작동할 수 있으며 매우 포괄적인 스키닝 시스템을 갖추고 있으므로 소스 코드 자체에 들어가지 않고도 모양을 조정할 수 있습니다.
이것은 또한 내가 시도한 유일한 스크립트(수십 개가 있음)로서 모든 일반적인 브라우저에서 안정적으로 작동합니다.
스크롤을 비활성화하지는 않지만(어두운 오버레이를 통해 일반 페이지 배경 스크롤을 계속 볼 수 있음) "팝업"은 어떤 경우에도 화면에 고정된 상태로 유지됩니다.
http://onehackoranother.com/projects/jquery/boxy/
jQuery.boxy는 또 다른 훌륭하고 가벼운 모달 대화 상자 플러그인입니다.
나는 보통 사용한다 ThickBox 이를 위해.사용자가 JS를 활성화하지 않으면 정말 잘 작동하고 성능이 저하됩니다.
jQuery를 사용하지만 Google에서 로드할 수 있습니다. http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js 캐싱의 이점을 얻을 수도 있습니다.
자바스크립트를 잡아라 내선 도서관.모달 오버레이에 대한 기능이 있습니다.
ThickBox(더 이상 개발되지 않음)는 나를 매우 잘 작동하는 것으로 보이는 다음 라이브러리로 안내했습니다.