1 사이트 접속했을때 떠있는 팝업
사이트 접속했을때 팝업을 띄우는 코드
2 스크롤 디테일
만들어야하는 최종 형태
조건1 : 사이트에 접속했을때 팝업2개가 동시에 떠있어야 합니다.
조건2 : 팝업이 떠있을때는 html스크롤이 없어야 합니다.
조건3 : 동시에 떠있던 팝업 중, 팝업2번의 X버튼을 누르면 남아있는 팝업1번의 html스크롤이 없어야 합니다.
스크롤 on/off 넘버없이 사용했을때
문제점
조건 : 팝업이 떠있을때는 html 스크롤이 없어야 합니다.
문제점 : 동시에 떠있던 팝업중 팝업2번 X버튼을 누르면, 팝업1번이 남았을때 팝업1번과 함께 html 스크롤이 나오게 됩니다.
원인 : addclass를 추가할때 팝업별로 추가되고 지워지도록 적어놓지 않으면 아래 영상과 같은 결과가 나오게 됩니다.
문제가 생기는 원인
사이트에 접속하는 순간 아래 코드로 인해
html에는 popup-actived라는 class가 강제로 들어간 상태입니다.
팝업2 X버튼 즉, .popup__btn-close를 클릭했을때 아래 함수식이 실행됩니다.
식을 잘 살펴보면 .popup__btn-close를 클릭하면
사이트 접속했을때 html에 강제로 들어갔던 popup-actived를
강제로 지우는 실행문(removeClass("popup-actived"))이 실행됩니다.
즉, 팝업2번 X버튼을 눌렀을때 html에 강제로 들어갔던 popup-actived가 빠지게 되면서팝업1번만 남았을때 hml 스크롤이 보이게 됩니다.
해결방안
풀이
popup-1 안에 있는 .popup__btn-close 를 클릭하면,
html 에 있는 popup-1-actived 라는 class가 강제로 지워진다.
popup-2 안에 있는 .popup__btn-close 를 클릭하면,
html 에 있는 popup-2-actived 라는 class가 강제로 지워진다.
결과
'웹3' 카테고리의 다른 글
| 매개변수를 사용하는 이유 (0) | 2022.11.06 |
|---|
