제목 | 부모페이지에서 아이프레임으로 팝업창 띄울 때 부모페이지 스크롤 고정 | ||
---|---|---|---|
글쓴이 | 토끼와거북 | 작성시각 | 2014/06/08 09:55:29 |
|
|||
<script> var scroll_on = ''; $(window).scroll(function(){ if(scroll_on == 'Y'){ $("body").scrollTop(0); } }); $(".popup_btn").click(function(){ scroll_on = 'Y'; // 팝업창 띄우기 메소드 실행 }); </script> |
|||
다음글 | 2.1.x 에 보안 문제가 있다고 하네요. (2) | ||
이전글 | 자바스크립트 모듈화를 위한 RequireJS (1) | ||
letsgolee
/
2014/06/09 07:47:40 /
추천
0
부모창 스크롤이 되어 있는 상태에서는 무조건 제일 위로 올라가지 않을까요?
|
토끼와거북
/
2014/06/10 01:36:52 /
추천
0
원래는 팝업창을 띄울 때에는 부모창 스크롤이 안 움직이도록 하는 것이 목적이었습니다.
0 대신에 팝업창을 띄울 때 부모장의 스크롤 위치값을 넣게 되면 부모창 스크롤 위차가 변동되지 않더군요. ie 에서는 document 로 접근해야 한다는 차이점이 있고요. |
letsgolee
/
2014/06/10 08:14:56 /
추천
0
그 말이 아니라, 부모 창이 이미 스크롤 되어 있는 상태에서 팝업창을 띄우면 부모 창이 최상단으로 움직이지 않겠느냐는 겁니다. 물론 팝업창이 떠 있는 상태에서 부모창은 움직이지 않지요. 왜냐하면 scrollTop 값을 0으로 고정했기 때문에요. 그런데 다시 언급하지만 부모 창이 어느 정도 스크롤 되어 있을 때에는 부모창이 한 번은 최상단으로 움직일 수밖에 없는 구조이다라는 겁니다. 따라서 원래 이 방식을 쓰지 않습니다.
일반적으로 iframe 팝업을 띄우면 div창을 띄우지요? 그럼 그 div와 body 사이에 약간 배경이 어두운 div를 삽입하여 body가 스크롤 되지 않게 합니다. 구현하는 것도 그렇게 어렵지 않구요. 삽입될 div는 width와 height값을 모두 100%로 주고 hidden으로 감추고 배경색만 약간 어둡게 해놓고 팝업 div보다 z-index값을 한단계 낮추어 설정한 후에 팝업이 뜨면 hidden을 display하고 팝업을 감출 때 다시 hidden으로 감추면 됩니다. |
토끼와거북
/
2014/06/10 12:45:32 /
추천
0
처음에는 저도 지적하신 부분이 문제가 되긴 했습니다.
코드부분을 수정하는 방법을 몰라 저 부분은 그대로 두긴 했는데 실제로 적용할 때는 약간 다르게 했습니다. var scroll_top = 0; var scroll_off = ''; $(window).scroll(function(){ if(scroll_off == 'Y'){ $("body").scrollTop(scroll_top); //chrome } }); function popup_open(){ scroll_off = 'Y'; scroll_top = $("body").scrollTop(); //chrome //scroll_top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; //ie //팝업창 띄우기 } 이런식으로 팝업창을 띄우기 전에 부모페이지 스크롤위치를 변수값으로 주게 되면 팝업창을 띄울 때 부모창 스크롤이 올라갔다가 다시 내려 오는 일이 없습니다. |
토끼와거북
/
2014/06/10 12:49:12 /
추천
0
제 방식으로는 브라우저는 체크를 해야 하는 문제점이 있던데요.
제시하신 방법대로 하면 이런 문제점은 없어지는군요. |