본문으로 건너뛰기

모달의 동작 및 인터랙션

모달의 동작 및 인터랙션

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


기본 동작 원리

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


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

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

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;
}

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!