[모달창] HTML 이미지 클릭 시 원본 크기로 이미지 보기

이미지 클릭 시 원본 이미지를 보고 싶었고, 그걸 모달창으로 구현해보았다.
적용해보니까 별거 아닌데 내가 원하는 방법으로 찾기 힘들었다..

---

📝 1. HTML

<img src="hdg.jpg" class="img">
<div class="modal">
  <span class="close">&times;</span>
  <img class="modal_content" id="img01">
</div>

한 줄씩 해석해보자.

---

<img src="hdg.jpg" class="img">

모달창으로 볼 이미지이다.

---

<div class="modal">
  <span class="close">&times;</span>
  <img class="modal_content">
</div>

모달창('.modal')이다.
span은 닫기창, img('.modal_content)는 모달창에 표시 될 이미지이다.

---

📝 2. CSS

.img{
    width: auto;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
  }
  /* 이미지 클릭 시, 밝기 조절 */
  .img:hover {opacity: 0.8;}

  .modal {
    display: none; /* 모달창 숨겨 놓기 */
    position: fixed; 
    z-index: 1; /* 모달창을 제일 앞에 두기 */
    padding-top: 100px;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto; /* 스크롤 허용 auto */
    cursor: pointer; /* 마우스 손가락모양 */
    background-color: rgba(0, 0, 0, 0.8);
  }
  /* 모달창 이미지 */
  .modal_content {
    margin: auto;
    display: block;
    width: 50%; height: auto;
    max-width: 1000px;
    border-radius: 10px;
    animation-name: zoom;
    animation-duration: 0.8s;
  }
  /* 모달창 애니메이션 추가 */
  @keyframes zoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
  }
  /* 닫기 버튼 꾸미기 */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .close:hover, .close:focus{
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }

---

📝 3. JavaScript

const modal = document.querySelector(".modal");
const img = document.querySelector(".img");
const modal_img = document.querySelector(".modal_content");
const span = document.querySelector(".close");

img.addEventListener('click', ()=>{
  modalDisplay("block");
  modal_img.src = img.src;
});
span.addEventListener('click', ()=>{
  modalDisplay("none");
});
modal.addEventListener('click', ()=>{
  modalDisplay("none");
});
function modalDisplay(text){
  modal.style.display = text;
}

한 줄씩 해석해보자.

---

img.addEventListener('click', ()=>{
  modalDisplay("block");
  modal_img.src = img.src;
});

이미지 클릭시 모달창을 띄운다.
모달의 display를 block으로 바꿔준 후에, 이미지의 display로 block으로 바꾼다.
이유는 모달창 스크롤 할 때, 모달창 뒤에 있는 이미지가 움직이지 않게 하기 위해서!

---

span.addEventListener('click', ()=>{
  modalDisplay("none");
});
modal.addEventListener('click', ()=>{
  modalDisplay("none");
});

닫기(X)창과 모달의 공백부분을 클릭했을 때, 모달의 display를 none으로 바꾼다.
모달창을 닫기 위해 추가하였다.

---

function modalDisplay(text){
  modal.style.display = text;
}

위에서 쓰인 modalDisplay() 함수이다.
text로 받은 값을 display의 값으로 변경한다.

---

끝!
출처1
출처2
출처3