반응형
[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
반응형
'[공부]하는 몽씨 > tip' 카테고리의 다른 글
| [tip] css로 숫자 증가되는 (카운터/자동넘버링) 리스트 만들기 (0) | 2021.12.06 |
|---|---|
| [Tip] 웹폰트 적용 방식 (0) | 2021.09.08 |
| [Tip] checkbox 초기화하기 (0) | 2020.10.19 |
| [Tip] tab(탭)에 카카오맵 api 지도 여러개 넣기 (0) | 2020.04.03 |
| [Tip] 크롬에서 현재 창 닫기 (window.close) (0) | 2020.04.03 |
반응형
[Tip] 세팅된 magnific popup에 추가 작업하기
반응형 페이지에서 쓰기 편한 팝업 플러그인으로
magific popup(https://dimsemenov.com/plugins/magnific-popup/)을 자주 쓰는 편인데,
근래에 해당 팝업이 세팅되어있는 페이지의 추가 작업이 있었습니다.
2/ 팝업에 내부링크(a태그 id속성, 책갈피 anchor 기능) 클릭 시, 이동 후 팝업을 닫을 것
1번의 경우에는 페이지가 열릴 때, 팝업이 오픈되어 있어야 하므로,
기존 magnific popup 소스에 내용을 추가하여 가볍게 완료.
이제 남은 건 2번의 경우였는데요.
내부링크를 클릭 시, 이동 후 닫혀야하기 때문에 onClick에 함수를 넣어주시고,
이렇게 소스를 넣어주면 완성입니다.
소스가 다소 복잡해지기는 했지만 위 방법으로 추가 작업까지 완료하였습니다.
(function($) {
$(window).load(function () {
$.magnificPopup.open({
items: {
src: 'img/이미지명.jpg'
},
type: 'image'
}, 0);
});
})(jQuery);
클릭 시, 해당 내부 링크로 이동 후 닫혀야 했기 때문에 소스 자체를 다시 수정해야 했습니다.
아래가 수정된 소스 내용입니다.
(function($) {
$(window).load(function () {
$.magnificPopup.open({
items: {
src: $('<a href="#내부링크" class="mfp-img" onClick="closePopup();"><img src="img/이미지명.jpg"></a>'),
type: 'inline'
}
}, 0);
});
})(jQuery);
function closePopup() {
$.magnificPopup.close();
}
위 소스처럼 이미지 자체에 a링크를 걸어 내부적으로 이동하는 방법이 있는 반면,
이미지 안에 버튼을 넣어 버튼을 클릭 시, 다른 페이지로 이동해야하는 때가 있는데 그럴 때는,
var data = [
{
userWebsite_href: '이동할 페이지.html',
userAvatarUrl_img: 'img/팝업 이미지명.png'
}
];
(function($) {
$(window).load(function () {
$.magnificPopup.open({
key: 'my-popup',
items: data,
type: 'inline',
inline: {
markup: '<div class="white-popup"><div class="mfp-close"></div>'+
'<a class="mfp-userWebsite">'+
'<div class="mfp-userAvatarUrl"></div>'+
'</a>'+'<a href="#">'+
'<img src="img/버튼 이미지명.png" class="btn">'+
'</a>'+
'</div>'
},
gallery: {
enabled: true
},
callbacks: {
markupParse: function(template, values, item) {
}
}
}, 0);
});
})(jQuery);
반응형
'[공부]하는 몽씨 > tip' 카테고리의 다른 글
| [Tip] 워드프레스 관련 메모2 (0) | 2020.03.18 |
|---|---|
| [Tip] 워드프레스 관련 메모 (0) | 2020.03.17 |
| [Tip] Esc로 팝업창 닫기 (0) | 2017.10.18 |
| [Tip] background로 이미지를 넣을 경우 익스플로러에서 흐릿하게 뭉개지는 현상 (0) | 2017.10.10 |
| [Tip] modal popup 띄울 때 slick slider가 움직이게 만들기 (0) | 2017.08.29 |
