CSS 모달 팝업

[HTML]

<div class="background">
  <div class="window">
    <div class="popup" id="popup" onclick="closePopup()"></div>
  </div>
</div>

[CSS]

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  backdrop-filter: blur(4px);
  
  /* 숨기기 */
  z-index: -1;
  opacity: 0;
}
.window {
  position: relative;
  width: 100%;
  height: 100%;
}
.popup {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: Red;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  padding: 1em;
  cursor: pointer;
  word-break: keep-all;
  
    /* 초기에 약간 아래에 배치 */
  transform: translate(-50%, -40%);
}
.show {
  opacity: 1;
  z-index: 1000;
  transition: all .5s;
}
.show .popup {
  transform: translate(-50%, -50%);
  transition: all .5s;
}
@media (max-width: 479px) {
.popup {
  width: 85%;
}
}

1. rgba란 Red, Green, Blue, Alpha는 불투명도를 말한다.

2. 엘리먼트가 서로 겹칠 경우, 코드상 나중에 배치된 것이 화면상에서 제일 앞으로 오게 되는데, z-index를 사용하면 인위적으로 뒤에 있는 엘리먼트를 앞으로 배치할 수 있다. (포토샵의 레이어를 위로 올리는 개념) z-index의 기본값은 0이고, 설정된 숫자가 클 수록 앞쪽에 배치된다.

3. 단위 vw & vh (viewport width & viewport height): 창 크기 즉 뷰포트에 의해 결정된다. 뷰포트의 크기가 200px*100px이라고 가정하면, 1vw=2px, 1vh=1px이다.

[JavaScript]

const popup = document.getElementById("popup");
const showPopup = (message) => {
  popup.innerHTML = `${message}`;
  document.querySelector(".background").className = "background show";
}
const closePopup = () => {
  popup.innerHTML = '';
  document.querySelector(".background").className = "background";
}