[Jquery Cookie] 제이쿼리 쿠키 로 첫 방문 이후 팝업 숨기기+두번째 방문 시 잠깐 뜨는 팝업 없애기 + 쿠키없애는 방법

✅ 쿠키 사용을 위한 CDN

    <!-- Jquery  -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <!-- 쿠키는 제이쿼리보다 밑에 있어야 동작 -->

 

⚠️주의 : 쿠키는 제이쿼리cdn보다 밑에 있어야 동작함

 

 

✅ JS코드 (해결 후 코드)

// |￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|
//     첫 진입시에만 팝업, 이후 숨김
// |＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿|
// \ (•◡•) /
$(document).ready(function () {
     var popDisplay = $.cookie('popDisplay');

     if (!popDisplay) {
          $('#pop').show(100);
          $.cookie('popDisplay', 'none', {
               path: '/'
          });
     } else {
          $('#pop').hide(); // 애초에 없었던 것처럼 숨기기
     }
});

 

✅ CSS (해결 후 코드)

/* 팝업을 감싸는 wrap */
.popup_wrap_inner {
    position: fixed;
    z-index: 900;
    width: 100%;
    display: none;  
    /* 숨겨놓고 JS와 쿠키로 보임/숨김 실행 */
}

 

가이드팝업

 

*이런식으로, 첫방문시에만 가이드 팝업을 보여주기 위해 사용함

 

 

 

 

 

⚒️ 해결방안

CSS를 사용해 팝업을 기본적으로 숨기고, JavaScript로 필요할 때만 보여주면 됨

 

 

 

처음에 보여주고, 숨길생각으로 코드를 짰어서

재방문시 자꾸 반짝! 거리게 됐었다 ㅎㅎ

이제 방법을 알았으니 불편하지 않을거 같당~

 

 

 

 

 

 

 

+ 사이트 방문 쿠키 없애는 방법

 

F12 눌러서 쿠키가 저장된 것만 클릭-마우스오른쪽- delete 하거나

(오른쪽 목록의 name 아래에 있는것 - 이 부분 쿠키만 삭제)

 

아니면 쿠키밑에 있는 ip주소에서 클릭-마우스오른쪽-clear 하면 됨

(이 사이트에서의 쿠키전체 삭제)