TIL - [multiple modal]

첫 미니프로젝트로 맛집 리스트 만들기로 했는데 다중 모달 때문에 3시간동안 고생했다.... ㅎ

 

한 페이지에 여러 개의 모달 팝업창 띄우기 

 

HTML코드 

<button class="popup-btn" data-popup="popup1">팝업 1 열기</button>
<button class="popup-btn" data-popup="popup2">팝업 2 열기</button>

<div class="popup" id="popup1">
  <div class="popup-content">
    <h2>팝업 1</h2>
    <p>팝업 내용을 여기에 작성합니다.</p>
    <button class="close-btn">닫기</button>
  </div>
</div>

<div class="popup" id="popup2">
  <div class="popup-content">
    <h2>팝업 2</h2>
    <p>팝업 내용을 여기에 작성합니다.</p>
    <button class="close-btn">닫기</button>
  </div>
</div>

CSS코드

const popupBtns = document.querySelectorAll('.popup-btn');
const closeBtns = document.querySelectorAll('.close-btn');
const popups = document.querySelectorAll('.popup');

popupBtns.forEach((popupBtn) => {
  popupBtn.addEventListener('click', () => {
    const popupId = popupBtn.dataset.popup;
    const popup = document.getElementById(popupId);
    popup.style.display = 'block';
  });
});

closeBtns.forEach((closeBtn) => {
  closeBtn.addEventListener('click', () => {
    const popup = closeBtn.closest('.popup');
    popup.style.display = 'none';
  });
});

popups.forEach((popup) => {
  popup.addEventListener('click', (event) => {
    if (event.target.classList.contains('popup')) {
      popup.style.display = 'none';
    }
  });
});

JS코드

const popupBtns = document.querySelectorAll('.popup-btn');
const closeBtns = document.querySelectorAll('.close-btn');
const popups = document.querySelectorAll('.popup');

popupBtns.forEach((popupBtn) => {
  popupBtn.addEventListener('click', () => {
    const popupId = popupBtn.dataset.popup;
    const popup = document.getElementById(popupId);
    popup.style.display = 'block';
  });
});

closeBtns.forEach((closeBtn) => {
  closeBtn.addEventListener('click', () => {
    const popup = closeBtn.closest('.popup');
    popup.style.display = 'none';
  });
});

popups.forEach((popup) => {
  popup.addEventListener('click', (event) => {
    if (event.target.classList.contains('popup')) {
      popup.style.display = 'none';
    }
  });
});

JS 코드 script를 계속 body에 안넣고 head에 넣어서 ㅠㅠ 팝업창이 뜨지 않았다.... 

개멍청 ㅠ 그래도 모달 팝업창 한 사이트에 다 똑같은거 뜨는거 해결해서 기쁘다..