본문으로 건너뛰기
실습하기

모달의 동작 및 인터랙션

JavaScript를 활용해 모달의 동작 및 인터랙션을 구현해보겠습니다.


기본 동작 원리​

모달의 기본적인 동작 원리는 display 속성을 조절함으로써 해당 모달을 사용자에게 보이게 하거나 숨기는 것입니다. 처음에는 display: none;으로 설정되어 있어 화면에 표시되지 않습니다.


모달의 display 속성을 이용한 보이기/숨기기​

모달을 보이거나 숨기기 위해 JavaScript를 사용하여 display 속성을 block과 none 사이로 전환할 수 있습니다.

const modal = document.getElementById('modal');

// 모달 보이기
modal.style.display = 'block';

// 모달 숨기기
modal.style.display = 'none';

확대 버튼의 기능​

확대 버튼을 클릭하면, 모달 컨텐츠의 크기가 확대됩니다.

이는 특정 클래스 (예: full)를 추가하거나 제거함으로써 구현할 수 있습니다.

const sizeBtn = document.querySelector('.size-btn');

sizeBtn.addEventListener('click', function () {
  modalContent.classList.toggle('full');
});

확대 버튼 클릭 시의 스타일 변경​

full 클래스가 적용되면, 모달 컨텐츠는 화면 전체 크기로 확장되며, 배경색과 기타 스타일이 변경됩니다.

CSS
.modal-content.full {
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}

애니메이션 및 전환 효과​

모달이 표시될 때, 부드러운 전환 효과가 적용되어 사용자 경험을 향상시킵니다.

모달의 fadeIn 및 scale 효과: 모달 컨텐츠는 서서히 나타나면서 크기가 조절됩니다.

CSS
@keyframes modalContentFadeInScale {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-content {
  animation: modalContentFadeInScale 0.3s ease;
}

닫기 아이콘에는 반짝이는 shimmer 효과가 적용되어 있습니다.

CSS
@keyframes shimmer {
  0% {
    background: #e6e6e6;
  }
  50% {
    background: #f2f2f2;
  }
  100% {
    background: #e6e6e6;
  }
}

.close-img {
  animation: shimmer 1.5s infinite;
}

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!