팝업띄웠을때 스크롤 막기, 해제

스크롤 막기위해 단지 overflow:hidden속성과 position:fixed만 쓰면

딤레이어와,팝업이 떴을때 화면이 맨위로 올라가는 이슈가 있다.(웹뷰 경험담)

- 해결책

* html

html>div.i-wrap // scrollTop 감지할 최상위 div

div.dim-layer //딤 레이어

div.popup // 팝업

div.popup > a.popup-close //팝업닫기

---

* css

/*팝업*/

.layer-open{

overflow:hidden; // 팝업열었을때 addClass로 속성추가 후 스크롤막기위한 css

}

.dim-layer{

display:none;

position:fixed;

z-index:9999;

top:0;

left:0;

width:100%;

height:100%;

min-height:100%;

background:rgba(0,0,0,0.7);

}

.popup{

display:none;

position: fixed;

   width: 80%;

   transform: translate(-50%, -50%);

   left: 50%;

   top: 50%;

   z-index: 9999;

}

.popup-close{

position:absolute;

right:10px;

top:10px;

color:#fff;

font-size:1.2em;

}

---

jquery

var scrollHeight = 0; // 전역변수로 초기화

//팝업열기버튼 클릭

$(".popup-open-btn").click(function(){

scrollHeight = $("body").scrollTop(); // 열렸을떄 scrollTop 체크 (var 쓰지않기. 팝업오픈했을때만사용하기위한 변수)

$("body").addClass('layer-open'); //overflow:hidden 추가

$(".i-wrap").css({

"position" : "fixed", //최상위 div 고정 

"top" : -scrollHeight // 최상위 div에 현재 스크롤된값 = 보이는화면만큼 top값 추가

});

$(".dim-layer, .more-popup").show(); //팝업 띄우기

});

//팝업 닫기버튼 클릭

$(".more-popup-close").click(function(){

$("body").removeClass("layer-open"); //overflow-hidden 해제(스크롤 해제)

$(".canvas-wrap").css({

"position" : "relative", //최상위 div 고정해제

"top" : "0" //top값 해제

});

$("body").scrollTop(scrollHeight); //현재 스크롤된값=보이는화면 

$(".dim-layer, .more-popup").hide(); //팝업 숨김

});

아마도 나만 알아볼 수 있을지도 모르겠다..