jQuery)쿠키를 사용하여 하루만 뜨는 모달창 만들기2 (+체크박스)

jQuery Cookie를 사용하여 하루만 혹은 기간을 정하여 모달창을 띄울 수 있다.

jQuery를 기본으로 깔고 있기 때문에 jQuery와 jQuery Cookie를 불러온다.

파일을 다운받아 연결해도 되고, CDN으로 연결해도 된다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

(CDN으로 연결)

파일 다운을 원할 시 https://plugins.jquery.com/cookie/ 에서 다운 받으면 된다.

 

HTML 

<!-- 모달창1(링크o) -->
<div class="modal md1" name="popup1">
  <span onclick="window.open('원하는 링크 주소 혹은 html 경로');">
    <img src="모달창 이미지" width="100%" alt="모달창1" title="모달창1" />
  </span>
  <div>
    <p>
      <input type="checkbox" name="popOneday1" id="popOneday1" />
      <label for="popOneday1">오늘 하루 보지 않기</label>
    </p>
    <span class="popClose">닫기</span>
  </div>
</div>

<!-- 모달창2(링크x) -->
<div class="modal md1" name="popup1">
  <span>
    <img src="모달창 이미지" width="100%" alt="모달창2" title="모달창2" />
  </span>
  <div>
    <p>
      <input type="checkbox" name="popOneday2" id="popOneday2" />
      <label for="popOneday2">오늘 하루 보지 않기</label>
    </p>
    <span class="popClose">닫기</span>
  </div>
</div>

원하는 모달창을 마크업 한다.

구현하고자 하는 기능

• 모달창은 총 2개
• 페이지 첫 화면에 고정되며 body가 스크롤이 되는 일반 모달창
• 모달창도 body에 고정되어 body가 스크롤 될 때 같이 스크롤됨 (위치고정x)
• 하나는 클릭했을 때 원하는 링크의 새 페이지를 띄우고, 나머지 하나는 단순한 공지용 모달창
• 오늘 하루 보지 않기 체크박스를 체크하고 닫기 버튼을 누르면 하루동안 모달창이 보이지 않음

CSS 

/* 모달창의 보여짐 여부는 js로 제어 */
.modal {display:none; position:absolute; top:30px; width:500px; border:1px solid #333;}
.modal > div {display:flex; justify-content:space-bewteen; padding:0 20px 10px; cursor:pointer;}
.modal > div > p {display:flex; align-itmes:center;}
.modal > div > p > input {position:relative; margin:0 4px 0 0; width:16px; height:16px; border:1px solid #999; border-radius:3px; cursor:pointer; outline:none; appearance:none;}
.modal > div > p > input:hover {border-color:#666;}
.modal > div > p > input:checked {border-color:#540e8a; background:#8717df;}
/* 가로세로 높이는 체크이미지 사이즈 */
.modal > div > p > input:checked::before {content:""; position:absolute; top:3px; left:2px; width:10px; height:8px; background:url("체크이미지경로") no-repeat;}
.md1 {left:30px; cursor:pointer; z-index:999;}
.md1 > div {background:#fedcdb} /* 모달창1 배경색 */
.md1 {left:540px; z-index:998;}
.md1 > div {background:#fff9e1} /* 모달창2 배경색 */

• 모달창의 보여짐/숨김(display) 여부는 스크립트로 제어하기 때문에 처음엔 display:none;으로 설정
• 체크박스는 체크되었을 때 보라색 배경으로 바뀌며 체크이미지가 나옴

jQuery 

let modal1 = document.querySelector(".md1");
let modal2 = document.querySelector(".md2");
let close = document.querySelectorAll(".popClose");

// 닫기 버튼 클릭
close.forEach((item) => {
  item.addEventListener("click", () => {
    // 각 닫기 버튼의 부모요소 중 .modal을 display:none;
    item.closest(".modal").style.display = "none";
    // 만약 name="popOneday1"인 체크박스가 체크되었으면,
    if ($('input:checkbox[name="popOneday1"]').is(":checked") == true) {
      // 이름: oneDay, 값: Y, 유지기간: 1일 인 쿠키를 생성
      $.cookie("oneDay1", "Y", { expires: 1 });
    }
    if ($('input:checkbox[name="popOneday2"]').is(":checked") == true) {
      $.cookie("oneDay2", "Y", { expires: 1 });
    }
  })
});

// 이름이 oneDay1인 쿠키가 없으면
if (!$.cookie("oneDay1")) {
  modal1.style.display = "block";
};
if (!$.cookie("oneDay2")) {
  modal2.style.display = "block";
};

close.forEach는 최적의 방법이 아닐 수도 있으나 테스트시 닫기기능과 쿠키 추가가 잘 되었다.