[Tip] magnific popup을 iframe 안에서 열었을 시 문제점

[Tip] magnific popup을 iframe 안에서 열었을 시 문제점

 

 

제 포스팅에 자주 나와서 짐작하고 계시겠지만 

전 magnific popup을 실무에서 자주 사용하는 편입니다. 

 

반응형 팝업이란 장점 뿐만 아니라 유튜브(비디오) 팝업, 갤러리 형식, 모달까지 구현되는

편리한 점들이 많아서 자주 애용하고 있는데,

iframe 안에 플러그인 팝업을 띄우는 상황에서 문제점을 확인하였습니다. 

 

 

 

 

 

일반 페이지에서는 팝업이 자동적으로 높이를 측정하여 중앙에 팝업을 띄우는데,

iframe 안에서는 팝업이 자동적으로 높이를 측정할 수 없어 

팝업이 화면 중앙이 아닌 하단에 위치되거나 상단에 위치되거나 

그도 아니면 중앙이 아닌 부분에 위치하는 난감한 상황이 벌어지게 됩니다.

 

열심히 구글링을 하고 삽질을 하면서 겨우 찾아낸 방식은 아래와 같습니다.

 

$('클래스명').magnificPopup
  callbacks:
    open: resizeThumbnailViewer
    imageLoadComplete: resizeThumbnailViewer

resizeThumbnailViewer = ->
  $('.mfp-wrap').css({top: viewport.scrollTop(), height: viewport.height()})
  $('.mfp-img').css({'max-height': viewport.height()})

 

위 내용으로 적용하니 iframe 안에서도 중앙 정 가운데에 뜨는 것을 확인할 수 있었습니다.

혹시 몰라 하단에 출처도 남깁니다.

 

 

* 참고 : https://github.com/dimsemenov/Magnific-Popup/issues/728