모달 동작 구현하기

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

1. 모달 DOM 요소 선택하기:

복사
const modal = document.getElementById('modal');
const modalClose = document.getElementsByClassName('modal-close')[0];

• 모달 전체 및 닫기 버튼에 대한 참조를 가져옵니다.

2. 이미지를 클릭하면 모달 표시:

복사
function gridImageClick() {
  modal.style.display = 'block';
}

• gridImageClick 함수는 .grid-image를 클릭할 때 호출되며, 화면에 모달을 표시합니다.

3. 닫기 버튼을 클릭하면 모달을 숨기기:

복사
modalClose.onclick = function () {
  modal.style.display = 'none';
};

• 닫기 버튼을 클릭하면 모달을 숨깁니다.

4. 모달 외부를 클릭하면 모달을 숨기기:

복사
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
};

• 페이지의 어디든지 클릭하면 이 이벤트 리스너가 호출되며, 클릭한 대상이 모달의 배경이면 모달을 숨깁니다.

5. 각 이미지에 클릭 이벤트 리스너 추가:

복사
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 속성)이 모달에 표시됩니다.