[제이쿼리] 현재 위치에서 팝업창 가운데로 띄우기

스크롤 바를 내린 상태에서 팝업 창을 띄우면 상단에 팝업창이 생기는 문제가 발생할 수 있다. 

"top": (($(window).height()-$("#popupDiv").outerHeight())/2+$(window).scrollTop())+"px"

"left": (($(window).width()-$("#popupDiv").outerWidth())/2+$(window).scrollLeft())+"px"

위 공식을 사용하면 현재 위치에서 가운데에 팝업창을 띄울 수 있다. 
 $("body").css("overflow","hidden");//body 스크롤바 없애기 

 $("body").css("overflow","auto");//body 스크롤바 생성

body의 overflow를 건드는 이유는 팝업창을 띄운 고정된 상태에서 스크롤바의 움직임을 제한하기 위해서다 .

        $('#sub1_popup').click(function() {

            $('.ly_bg').show();

            // 마우스 위치에 팝업 나오기

            $('#ly_popup').css({

               "top": (($(window).height() - $(".popup_area").outerHeight()) / 2 + $(window).scrollTop()) + "px"

               //팝업창을 가운데로 띄우기 위해 현재 화면의 가운데 값과 스크롤 값을 계산하여 팝업창 CSS 설정

            }).show();

         });

// 출처:http://qjadud22.tistory.com/7

2018.06.05 추가

https://jsfiddle.net/Kimara/ds7h6xwf/

1. position: fixed; top:50%; left: 50%; 이용

var popWidth = $('.pop_layer').width();

var popHeight = $('.pop_layer').height();

var clientWidth = popWidth / 2;

var clientHeight = popHeight / 2;

$('#pop_wrap').css({'marginLeft':'-'+ clientWidth +'px '  ,'marginTop':'-'+ clientHeight +'px'}).show();

해당 레이어의 가로값과 높이값의 반의 마이너스값을 마진에 넣는다.

※ 팝업이 클경우, 모니터 창이 작으면 잘릴 수 있다.

   px이 아닌 %를 쓰면 괜찮으려나?

2. position: absolute; top:0; left: 50%;

$('#pop_wrap2').css({'marginLeft':'-'+ clientWidth +'px' ,'top': (($(window).height() - $('.pop_layer').outerHeight()) / 2 + $(window).scrollTop()) + 'px'}).show();

위 예제와 같다. 추가된 건 마진레프트 값을 넣은것.

웹에서는 괜찮은데, 모바일에서 원하는 위치값이 아니라 해당 윈도우 값을 부르다보니 팝업이 계속 아래로 내려가버린다... 흠... 모바일에서는 팝업을 지정위치에 올려놓고 애니메이션 효과를 줘서 스크롤탑으로 올리는게 괜찮을듯.