모달 팝업

<div id="popup" class="popup">
  <div class="popup-content">
    <figure>
      <img src="/asset/images/index/popup-230320_230414.jpg" alt="팝업 이미지">
    </figure>
    <div class="btnArea">
      <button id="close-btn" class="close-btn">닫기</button>
      <button id="not-again-btn" class="not-again-btn">오늘 하루 안보기</button>
    </div><!-- .btnArea -->
  </div>
</div>

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

  .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 20px;

    figure {
      width: auto;
      height: 80vh;
    }
  }

  .btnArea {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    
    button {
      display: block;
      margin: 0 5px;
      padding: 10px;
      border: 0;
      background: var(--mainColor);
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      border: 0;
      border-radius: 10px;
      cursor: pointer;
    }
  }
}


/* 반응형 */
.popup {
    .popup-content {
      figure {
        width: 80vw;
        height: auto;
      }
    }

    .btnArea {
      button {
        font-size: 1.5rem;
      }
    }
  }
  
  /* 반응형2 */
  .popup {
    .btnArea {
      button {
        font-size: 1rem;
      }
    }
  }

 

// 팝업을 보여주는 함수
function showPopup() {
  document.body.style.overflow = 'hidden';
  document.getElementById("popup").style.display = "block";
}

// 팝업을 닫는 함수
function closePopup() {
  document.body.style.overflow = 'auto';
  document.getElementById("popup").style.display = "none";
}

// 쿠키를 설정하는 함수
function setCookiePop() {
  var date = new Date();
  // 쿠키 만료일을 오늘 자정으로 설정
  date.setHours(23, 59, 59, 0);
  document.cookie = "popup_closed=true;expires=" + date.toUTCString() + ";path=/";
}

// 쿠키를 가져오는 함수
function getCookie2(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) {
    return parts.pop().split(";").shift();
  }
}

// 페이지가 로드되면 실행되는 함수
window.onload = function () {
 // 오늘 하루 안보기 버튼을 눌렀는지 확인
  var popup_closed = getCookie2("popup_closed");
  if (popup_closed) {
    return;
  }
  
  // 팝업을 보여줌
  var end_date = new Date();
  // 팝업을 보여줄 기간 설정 (24일로 설정한 예시)
  end_date.setDate(end_date.getDate() + 24);
  var current_date = new Date();
  if (current_date < end_date) {
    showPopup();
    // 닫기 버튼에 이벤트 리스너 등록
    document.getElementById("close-btn").addEventListener("click", function () {
      closePopup();
    });
    // 오늘 하루 안보기 버튼에 이벤트 리스너 등록
    document
      .getElementById("not-again-btn")
      .addEventListener("click", function () {
        setCookiePop();
        closePopup();
      });
  }
};