VanillaJS로 Modal 창 만들기

1. index.html body 상단에 div를 하나 만든다.

<div class="overlay" id="modal-overlay"></div>

2. js에서 showModal() 함수 작성

export const showModal = (message, callback) => {
    //모달 내용을 modal-overlay div안에 추가
    //modal-overlay-backgroud는 배경 클릭했을 때, 모달 닫게 해주기 위해 만듬.
  document.getElementById('modal-overlay').innerHTML =
    `
    <div id="modal-overlay-backgroud"></div>
    <div class="modal-overlay-content">
        <div id="modal-overlay-message">${message}</div>
        <button id="modal-overlay-close-button">OK</button>
    </div>
  `;

    //modal-overlay div에 active클래스를 추가해 display 보이게 함.
    document.getElementById('modal-overlay').classList.add('active');

    //modal-overlay-backgroud div를 클릭하면 modal-overlay display: none 되게 함
  document
    .getElementById('modal-overlay-backgroud')
    .addEventListener('click', () => {
      document.getElementById('modal-overlay').classList.remove('active');
      if (callback) {
        callback();
      }
    });

    //modal-overlay-close-button 클릭하면 modal-overlay display: none 되게 함
  document
    .getElementById('modal-overlay-close-button')
    .addEventListener('click', () => {
      document.getElementById('modal-overlay').classList.remove('active');
      if (callback) {
        callback();
      }
    });
};

3. css작성

.overlay {
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 16, 16, 0.5);
}

#modal-overlay-backgroud {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

/* z-index를 .overlay보다 높게해주면, modal-overlay-backgroud보다 위에 있으므로 클릭해도 꺼지지 않는다. */
.overlay .modal-overlay-content {
  background-color: #fff;
  color: #000;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  max-width: 40rem;
  z-index: 11;
}

.overlay .modal-overlay-content > * {
  margin: 2rem;
}