모달팝업 클릭 시 페이지 최상단 이동문제
본문
개인정보정책 이용약관 같은 항목이있습니다.
이것을 클릭하면 전체가 까만 화면이 되고 내용이 나타나는 형태인데요
a태그를 사용하지않고 스크립트에서 span.link 영역을 클릭하면 클릭이벤트가 발생하면 팝업이 뜹니다.
바닥 스크롤을 막기위해 body 태그에 오버플로우를 주고 height:100% 을 줬는데
클릭하면 페이지 최상단으로 쭉 올라가 버리네요...
검색 해봐도 a 태그일 경우만 나오고 이런 상황은 도저히 못찾겠어서 질문 남깁니다.
$(".consult .link").on("click", function(){
$(".privacy").show();
$("body").addClass("active");
})
.privacy {width:100%;height:100%;background-color:#000}
body.active {overflow: hidden;height: 100%}
답변 3
$("body").addClass("active");
body.active { overflow:hidden !important; }
따로 테스트페이지 만들어서 해봤는데요...
스크립트로 ative 클래스 주면 스크롤바가 없어지는데:100% 빼보시고 해보세용
어딘가 높이 100%가 영향을 주는거 아닐가요?
function(e){
e.preventDefault()
넣어보시고 해보세요
넣어도 똑같이 상단으로 이동해버리네요 ㅠㅠ
근데 왜 바디에 100% 주신거에요?
전체배경 깔리는 div 별도로 만들어서 전체 영역 잡고 그안에 개인정보 약관 넣으시면 되실듯한데요?
.wrap-div {
/*화면 전체를 어둡게 합니다.*/
z-index: 999;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.2);
/*not in ie */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');
/* ie */
}
.wrap-div div {
/*로딩 이미지*/
position: fixed;
top: 50%;
left: 50%;
background: #FFF;
}
.wrap-div div > .privacydiv {
width: 500px;
padding: 5px;
background-color: #fff;
transform: translateX(-50%);
}
<div class="wrap-div">
<div>
<div class="privacydiv "> 개인정보 </div>
</div>
</div>
바닥 스크롤 막으려고 overflow:hidden 주고 100%한건데.. 뭐가 잘못됐나요 ? 말씀해주신걸로는 바닥 스크롤이 되네여...
