모달 만들기

 

모달 만들기를 해보았다.

UI를 먼저 만들고 나서 클래스를 붙이는 방식으로하니 그렇게 어려운 건 없었다.

 

 

핵심적 코드

open modal을 클릭하면 display:none이 붙은 클래스를 없애는 방식으로 진행하였다

저번에 했던 navigation코드와 매우 비슷

 

hidden 클래스를 JS로 붙였다뗏다하는식으로 완성

    <div class="modal hidden">
      <h2>Modal content</h2>
      <button class="modal_exit"><img src="exit.svg" alt="exit" /></button>
    </div>

.hidden {
  display: none;
}

(JS)
const modal = document.querySelector(".modal");
const modal_btn = document.querySelector(".modal_btn");
const modal_exit = document.querySelector(".modal_exit");
modal_btn.addEventListener("click", function () {
  modal.classList.toggle("hidden");
});

modal_exit.addEventListener("click", function () {
  modal.classList.toggle("hidden");
  console.log(modal);
});