본문으로 건너뛰기

모달 동작 구현하기

모달 동작 구현하기

이번 수업에서는 JavaScript를 활용해 모달을 동작시켜 볼게요.


  1. 모달 DOM 요소 선택하기:
const modal = document.getElementById('modal');
const modalClose = document.getElementsByClassName('modal-close')[0];
  • 모달 전체 및 닫기 버튼에 대한 참조를 가져옵니다.

  1. 이미지를 클릭하면 모달 표시:
function gridImageClick() {
modal.style.display = 'block';
}
  • gridImageClick 함수는 .grid-image를 클릭할 때 호출되며, 화면에 모달을 표시합니다.

  1. 닫기 버튼을 클릭하면 모달을 숨기기:
modalClose.onclick = function () {
modal.style.display = 'none';
};
  • 닫기 버튼을 클릭하면 모달을 숨깁니다.

  1. 모달 외부를 클릭하면 모달을 숨기기:
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = 'none';
}
};
  • 페이지의 어디든지 클릭하면 이 이벤트 리스너가 호출되며, 클릭한 대상이 모달의 배경이면 모달을 숨깁니다.

  1. 각 이미지에 클릭 이벤트 리스너 추가:
document.querySelectorAll('.grid-image').forEach(function (el) {
el.addEventListener('click', (e) => {
const gridImage = e.target;
const gridImageInString = gridImage.outerHTML;
const alt = gridImage.alt;

const modalImage = document.getElementById('modal-image');
const modalText = document.getElementById('modal-text');

modalImage.innerHTML = gridImageInString;
modalText.innerHTML = alt;
});
});
  • .grid-image 클래스를 가진 모든 요소에 대하여 클릭 이벤트 리스너를 추가합니다.

  • 이미지를 클릭하면 해당 이미지의 HTML과 alt 속성을 가져와 모달 내의 이미지와 텍스트 영역에 설정합니다. 이를 통해 클릭한 이미지와 설명(alt 속성)이 모달에 표시됩니다.

다음 내용이 궁금하다면?

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