[🍦] 모달창 여러 추가 기능 구현하기

 

📌모달창 열었을 때 뒤의 화면 고정하기

모달창을 여는 클릭이벤트 함수에 적용하기 

document.body.style.overflow = "hidden";

 

모달창을 닫는 클릭이벤트 함수에 적용하기

 document.body.style.overflow = "scroll";

overflow 설명

 

 

 

📌 모달창 스크롤바 설정

.modal-content {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.modal-content::-webkit-scrollbar {
  display: none;
}

 

📍overflow-y: auto; 

: 모달 내부 컨텐츠가 주어진 공간을 넘어가는 경우 세로 스크롤바 생성하기

스크롤바 커스텀 설명

 

 

---

참고 :

CSS position 설명