[Javascript]jQuery 팝업(오늘 하루 그만보기)

Study/각종모음 및 팁

by 개발성훈 2023. 2. 15. 18:28

웹페이지 쿠키를 이용하여 시간설정으로 팝업을 노출시키지 않게 할 수 있다

또 예약시간

예 : 보지않기 버튼 클릭시 24시간 및 시간단위로 노출시키지않는 방법과

00시가 기준으로 초기화 하는 방법이 있다.

상황에 맞는 방법으로 사용하면 될 것 같다.

팝업창을 만들 때 해당 팝업에 name을 지정 후 해당 name으로 쿠키값을 셋팅 후 name으로 해당 팝업을 찾아서 팝업을 노출, 비노출 시키는 방법으로 제각하였다.

또 팝업이 여러개일 경우 name값으로 쿠키를 설정하기에 각기 다른 name으로 지정 후 해당 name값에 쿠키를 설정하는 방법으로 하였다.

1. 팝업창이 하나일경우

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PopUp</title> 
    
    <!-- jQuery 선언 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <!-- 팝업 공지사항 -->
    <div class="main_notice_pop" name="popup1" style="position:fixed; left:50px; top:63px; display:none; z-index:999;">
        <div style="width: 300px;height:300px;">팝업창 입니다</div>         
        <a href="#" class="btn_close">x</a> <br> 
        <input type="checkbox" name="today_close1" />오늘만 이 창을 열지 않음
    </div> 
    
    <!-- css -->
    <style type="text/css">
        .main_notice_pop .btn_close {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
        }
    </style> 
    
    <!-- Javascript -->
    <script type="text/javascript">

        $(document).ready(function () {
            // 팝업창에 주어진 이름을 변수로 던져 저장된 쿠키가 있는지 확인 
            var popup1 = getCookie('popup1');

            // 변수가 없을경우 팝업 출력 
            if (!popup1) {
                popUpAction('popup1');
            }
        });

        // 쿠키 가져오기 
        function getCookie(name) {
            var nameOfCookie = name + "=";
            var x = 0;
            while (x <= document.cookie.length) {
                var y = (x + nameOfCookie.length);

                if (document.cookie.substring(x, y) == nameOfCookie) {
                    if ((endOfCookie = document.cookie.indexOf(";", y)) == -1)
                        endOfCookie = document.cookie.length;
                    return unescape(document.cookie.substring(y, endOfCookie));
                }

                x = document.cookie.indexOf(" ", x) + 1;

                if (x == 0) break;
            }

            return "";
        } // 24시간 기준 쿠키 설정하기 

        // expiredays 후의 클릭한 시간까지 쿠키 설정 
        function setCookie24(name, value, expiredays) {
            var todayDate = new Date();

            todayDate.setDate(todayDate.getDate() + expiredays);

            document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
        }

        // 00:00 시 기준 쿠키 설정하기 // expiredays 의 새벽 00:00:00 까지 쿠키 설정 
        function setCookie00(name, value, expiredays) {
            var todayDate = new Date(); todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);

            if (todayDate > new Date()) {
                expiredays = expiredays - 1;
            }

            todayDate.setDate(todayDate.getDate() + expiredays);

            document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
        }

        // 팝업출력
        function popUpAction(name) {
            // name으로 해당 팝업창 열기 
            $("div[name=" + name + "]").fadeIn();
        }

        // 닫기버튼 클릭 이벤트 
        $('.btn_close').click(function () {
            $(this).parent('.main_notice_pop').fadeOut();

            // 오늘하루 보지않기 체크 확인 
            if ($("input:checkbox[name=today_close1]").is(":checked") == true) {
                setCookie00('popup1', "done", 1);
            }

            // name으로 해당 팝업창 닫기 
            $(this).parent("div[name=" + name + "]").fadeOut();
        }) 
    </script>
</body>

</html>

2. 팝업창이 여려개일 경우

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PopUp</title>

    <!-- jQuery 선언 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <!-- 팝업 공지사항 -->
    <div class="main_notice_pop" name="popup1" style="position:fixed; left:50px; top:63px; display:none; z-index:999;">
        <div style="width: 200px;height:300px;">팝업창1 입니다</div>
        <a href="#" class="btn_close">x</a> <br>
        <input type="checkbox" name="today_close1" />오늘만 이 창을 열지 않음
    </div>

    <!-- 팝업 공지사항 -->
    <div class="main_notice_pop" name="popup2" style="position:fixed; left:300px; top:63px; display:none; z-index:999;">
        <div style="width: 200px;height:300px;">팝업창2 입니다</div>
        <a href="#" class="btn_close">x</a> <br>
        <input type="checkbox" name="today_close2" />오늘만 이 창을 열지 않음
    </div>

    <!-- 팝업 공지사항 -->
    <div class="main_notice_pop" name="popup3" style="position:fixed; left:600px; top:63px; display:none; z-index:999;">
        <div style="width: 200px;height:300px;">팝업창3 입니다</div>
        <a href="#" class="btn_close">x</a> <br>
        <input type="checkbox" name="today_close3" />오늘만 이 창을 열지 않음
    </div>

    <!-- css -->
    <style type="text/css">
        .main_notice_pop .btn_close {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
        }
    </style>

    <!-- Javascript -->
    <script type="text/javascript">
        $(document).ready(function () {
            // 팝업창에 주어진 이름을 변수로 던져 저장된 쿠키가 있는지 확인         
            var popup1 = getCookie('popup1');
            var popup2 = getCookie('popup2');
            var popup3 = getCookie('popup3');

            // 변수가 없을경우 팝업 출력         
            if (!popup1) {
                popUpAction('popup1');
            }

            // 변수가 없을경우 팝업 출력 
            if (!popup2) { popUpAction('popup2'); }

            // 변수가 없을경우 팝업 출력 
            if (!popup3) { popUpAction('popup3'); }
        });

        // 쿠키 가져오기 

        function getCookie(name) {
            var nameOfCookie = name + "=";
            var x = 0; while (x <= document.cookie.length) {
                var y = (x + nameOfCookie.length);
                if (document.cookie.substring(x, y) == nameOfCookie) {
                    if ((endOfCookie = document.cookie.indexOf(";", y)) == -1)
                        endOfCookie = document.cookie.length;
                    return unescape(document.cookie.substring(y, endOfCookie));
                }
                x = document.cookie.indexOf(" ", x) + 1; if (x == 0)
                    break;
            }
            return "";
        }

        // 24시간 기준 쿠키 설정하기 
        // expiredays 후의 클릭한 시간까지 쿠키 설정 
        function setCookie24(name, value, expiredays) {
            var todayDate = new Date(); todayDate.setDate(todayDate.getDate() + expiredays);
            document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
        }

        // 00:00 시 기준 쿠키 설정하기 
        // expiredays 의 새벽 00:00:00 까지 쿠키 설정 
        function setCookie00(name, value, expiredays) {
            var todayDate = new Date();
            todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);
            if (todayDate > new Date()) {
                expiredays = expiredays - 1;
            }
            todayDate.setDate(todayDate.getDate() + expiredays);
            document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
        }

        // 팝업출력
        function popUpAction(name) {
            // name으로 해당 팝업창 열기 
            $("div[name=" + name + "]").fadeIn();
        }

        // 닫기버튼 클릭 이벤트 
        $('.btn_close').click(function () {
            $(this).parent('.main_notice_pop').fadeOut();
            // 오늘하루 보지않기 체크 확인 
            if ($("input:checkbox[name=today_close1]").is(":checked") == true) {
                setCookie00('popup1', "done", 1);
            }

            // 오늘하루 보지않기 체크 확인
            if ($("input:checkbox[name=today_close2]").is(":checked") == true) {
                setCookie00('popup2', "done", 1);
            }

            // 오늘하루 보지않기 체크 확인 
            if ($("input:checkbox[name=today_close3]").is(":checked") == true) {
                setCookie00('popup3', "done", 1);
            }

            // name으로 해당 팝업창 닫기 
            $(this).parent("div[name=" + name + "]").fadeOut();
        });

    </script>
</body>

</html>

참고된 사이트 : https://asufi.tistory.com/entry/Javascript-jQuery-%ED%8C%9D%EC%97%85%EC%B0%BD-%EC%98%A4%EB%8A%98%ED%95%98%EB%A3%A8-%EA%B7%B8%EB%A7%8C%EB%B3%B4%EA%B8%B0

'Study > 각종모음 및 팁' 카테고리의 다른 글

[CSS] 삽질 금지 도움글 (0)	2021.03.15
vscode 세팅 (0)	2021.02.21
CSS 네이밍 규칙 (0)	2021.02.05
Front-End Road Map (0)	2020.10.29
각종 강의영상 모음 (0)	2020.09.22