TIP게시판

제목 부모페이지에서 아이프레임으로 팝업창 띄울 때 부모페이지 스크롤 고정
글쓴이 토끼와거북 작성시각 2014/06/08 09:55:29
댓글 : 5 추천 : 0 스크랩 : 0 조회수 : 18008   RSS
<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
제 방식으로는 브라우저는 체크를 해야 하는 문제점이 있던데요. 
제시하신 방법대로 하면 이런 문제점은 없어지는군요.