반응형
popup 작업 시 overflow:hidden 과 overflow:auto 로 연명해 온 지난 날,
그동안 모바일 팝업 본문에서 스크롤 쓸 일이 없었는지 위 코드가 모바일에서 적용이 안되는걸 인지한지 얼마 되지 않았다.
나는 왜 항상 다른 블로거 분들이 해결한 방법이 한번에 먹히지 않는걸까...ㅠ
여러가지를 조합해 본 끝에 내 코드에 먹히는 방법을 찾아냄..ㅠ
<html>
<body>
<div id="wrapper">
<!--본문-->
</div>
<div class="popWrap">
<!--팝업내용-->
</div>
</body>
</html>html, body, #wrapper {
height: 100%;
overflow: auto;
}
html{
overflow:hidden !important
}
.popWrap{
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
width: 100vw;
height: 100vh;
display: none;
z-index: 999;
}function popOpen(){
$('.popWrap').show();
$('html, body, #wrapper').css('overflow','hidden')
}포인트 몇가지는
- 본문 #wrapper 와 .popWrap 분리
- css로 html, body, #wrapper 에게 값 주기(jquery에서 주는거X) / 여기서 html은 overflow:hidden
- jquery에서 overflow hidden 줄 때 #wrapper도 같이
반응형
'퍼블리셔' 카테고리의 다른 글
| checkbox 전체선택/해제 (0) | 2021.05.11 |
|---|