[TIL]2023.06.20 /자바스크립트로 모달창 만들기/

목표

 

---

참고자료

자바스크립트로 모달 창 만들기 - Creative Nomad LondonCity (walterz.net)

---

내용

 

html에 틀 작성 (id 똑같이 작성하기)

<div id="modal">
  <div class="modal-content">
    <h2>모달창 제목</h2>
    <p>모달창 내용</p>
    <button id="close-modal">닫기</button>
  </div>
</div>

        <div>

            <button id="open-modal">ai 게시글 작성</button>

        </div>

 

js로 버튼을 누를때마다 스타일 변경 해주기

const modal = document.getElementById("modal");
const openModalBtn = document.getElementById("open-modal");
const closeModalBtn = document.getElementById("close-modal");

// 모달창 열기
openModalBtn.addEventListener("click", () => {
  modal.style.display = "block";
  document.body.style.overflow = "hidden"; // 스크롤바 제거
});

// 모달창 닫기
closeModalBtn.addEventListener("click", () => {
  modal.style.display = "none";
  document.body.style.overflow = "auto"; // 스크롤바 보이기
});

 

 

---

문제 (해결하기 어려웠던 일이나 에러)

 

---

시도 (문제가 생긴 이유와 해결하기 위해 시도해본 것들)

 

---

해결 (최종적으로 해결이 되었을 때 시도한 것 정리)

 

---

마무리 (내가 새롭게 알게 된 것이나 짧은 정리)