TIL

Jony·2024년 5월 13일

[TIL]

목록 보기
20/46
post-thumbnail

추가적 기능으로 modal팝업 외부화면 클릭 시, 닫기 기능도 넣어줬다.

  • 문제였던 첫 코드
modal.addEventListener('click', e=>{
    const outsideClose = e.target;
    if(outsideClose.classList.contains('modal')){
    	modal.style.display = 'none'
    	modal.classList.add('hidden')
    	modal.classList.remove('visible')
    }
 });

modal.style.display = 'none'이 부분이 실행됨에 따라 그 뒤에 오는 코드의 동작 유무를 몰랐다.
modal.classList.remove('visible')
modal.classList.add('hidden'), 보다 먼저 선행되어 뒤의 코드를 적어준다 해도 이미 none이 실행 상태였기에 작동 자체를 하지 않았던 것이다.

그래서 바꿔준 코드가 해당 부분을 삭제하고 classList의 두 부분의 위치를 바꿔 수정해줬더니 정상적으로 동작하였다.
정말 사소한 부분이였지만 이해가 부족했기에 있던 문제라 생각한다.

profile
알면 알수록 모르는 코태계

0개의 댓글