Guidelines
Practice
모달 동작 구현하기
이번 수업에서는 JavaScript를 활용해 모달을 동작시켜 볼게요.
- 모달 DOM 요소 선택하기:
const modal = document.getElementById('modal'); const modalClose = document.getElementsByClassName('modal-close')[0];
- 모달 전체 및 닫기 버튼에 대한 참조를 가져옵니다.
- 이미지를 클릭하면 모달 표시:
function gridImageClick() { modal.style.display = 'block'; }
gridImageClick
함수는.grid-image
를 클릭할 때 호출되며, 화면에 모달을 표시합니다.
- 닫기 버튼을 클릭하면 모달을 숨기기:
modalClose.onclick = function () { modal.style.display = 'none'; };
- 닫기 버튼을 클릭하면 모달을 숨깁니다.
- 모달 외부를 클릭하면 모달을 숨기기:
window.onclick = function (event) { if (event.target == modal) { modal.style.display = 'none'; } };
- 페이지의 어디든지 클릭하면 이 이벤트 리스너가 호출되며, 클릭한 대상이 모달의 배경이면 모달을 숨깁니다.
- 각 이미지에 클릭 이벤트 리스너 추가:
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 속성)이 모달에 표시됩니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help