팝업창 띄우기(기간 설정)

거너거너·2022년 2월 15일
1

javascript

목록 보기
2/2

레이어 팝업

  1. 하루동안(기간동안?) 그만 보기
  2. 팝업 끝나는 날짜 설정하여 자동으로 내리기
<html xmlns:th="http://www.thymeleaf.org">
<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>Document</title>

    <!-- 팝업 css 시작 부분 -->
    <style>
    .pop {margin:0 auto; max-width:800px;}
    .pop .title {margin:10px 0; font-size:25px; font-weight:600; text-align:center;}
    .pop p {line-height:20px; font-size:14px;}

    .pop {display:none;}
    .pop:before {display:block; content:""; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5);}
    .pop .layerBox {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); padding:30px; background:#fff; border-radius:6px;}
    .pop .layerBox .title {margin-bottom:10px; padding-bottom:10px; font-weight:600; border-bottom:1px solid #d9d9d9; text-align: left;}
    .pop .layerBox .cont {margin-bottom:40px;}
    .pop .layerBox p {line-height:20px; font-size:13px;}
    .pop .layerBox .btnClose {display:inline-block; padding:6px 12px; color:#444; font-size:12px; text-decoration:underline;}
    .pop .layerBox .btnTodayHide {font-size:13px; font-weight:600; text-decoration:underline;}
    </style>
    <!-- 팝업 css 끝 부분 -->

</head>
<body>

<!-- 팝업 창 작성 시작 부분 -->
<div id="pop" class="pop">
    <div class="layerBox">
        <h1 class="title">레이어팝업 타이틀</h1>
        <div class="cont">
            <p>lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="close">
            <span id="check" class="btnTodayHide"><input type="checkbox" value="checkbox" name="chkbox" id="chkday"/><label for="chkday">오늘 하루동안 보지 않기</label></span>
            <span id="close" class="btnClose"> <a href="#0">닫기</a></span>
            <span id="close1" class="btnClose"> <a href="#0">닫기</a></span> <!-- id값을 다르게 주어 2개의 팝업 쿠키값 다르게 설정(맨밑 js부분도 close->close1으로 수정)[참고3사이트 참고] -->
        </div>
    </div>
</div>
<!-- 팝업 창 작성 끝 부분 -->

<!-- 본문 내용 시작 부분 -->
<div class="contents">
    <h1 class="title">본문 제목</h1>
    <p>
        본문 내용
    </p>
</div>
<!-- 본문 내용 끝 부분 -->

<!-- 팝업 JS 부분 -->
<script>
    (function(){
        const pop = document.querySelector('#pop');
        const close = document.querySelector('#close');

        function now () { // 현재 날짜, 시간, 분, 초를 모두 가지고 와서 '년-월-일-시-분-초' 형식으로 만들어주는 함수
            const popDt = new Date(),
                popYear = popDt.getFullYear(),
                popMonth = popDt.getMonth() + 1,
                popDate = popDt.getDate(),
                popHours = popDt.getHours(),
                popMin = popDt.getMinutes(),
                popSecond = popDt.getSeconds();
            return popYear+'-'+(popMonth<10?'0'+popMonth:popMonth)+'-'+(popDate<10?'0'+popDate:popDate)+'-'+popHours+'-'+popMin+'-'+popSecond;
        };

        function endDate() {  // 끝나는 날짜, 시간, 분, 초를 모두 가지고 와서 '년-월-일-시-분-초' 형식으로 만들어주는 함수
            const endYear = "2022",
                endMonth = "11",
                endDate = "12",
                endHours = "11",
                endMin = "50",
                endSecond = "00";
            return endYear+'-'+(endMonth<10?'0'+endMonth:endMonth)+'-'+(endDate<10?'0'+endDate:endDate)+'-'+endHours+'-'+endMin+'-'+endSecond;
        };

        function dayNone() { // 현재 날짜와, 끝나는 날짜 서로 비교하여 pop을 숨기는 기능
            if(now() > endDate()){
                pop.style.display = 'none';
            }
        };

        // 쿠키 가져오기
        const getCookie = function (cname) {
            const name = cname + "=";
            const ca = document.cookie.split(';');
            for(let i = 0; i <ca.length; i++) {
                const c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
            }
            return "";
        };

        // 24시간 기준 쿠키 설정하기
        const setCookie = function (cname, cvalue, exdays) {
            const todayDate = new Date();
            todayDate.setTime(todayDate.getTime() + (exdays*24*60*60*1000));
            const expires = "expires=" + todayDate.toUTCString(); // UTC기준의 시간에 exdays인자로 받은 값에 의해서 cookie가 설정 됩니다.
            document.cookie = cname + "=" + cvalue + "; " + expires;
        };

        const couponClose = function(){
            if(document.querySelector('input[name="chkbox"]').checked === true){
                setCookie("close","Y",1);   //기간( ex. 1은 하루, 7은 일주일)
            }
            pop.style.display = 'none';
        };

        const cookiedata = document.cookie;
        if(cookiedata.indexOf("close=Y")<0){
            pop.style.display = 'block';
            dayNone();
        }else{
            pop.style.display = 'none';
        }

        close.addEventListener('click', function(){
            couponClose();
        });

    })();
</script>
<!-- 팝업 JS 끝나는 부분 -->

</body>
</html>

참고사이트1
참고사이트2
참고사이트3(레이어팝업 2개이상 띄우기)

profile
배움이 필요한 사람

0개의 댓글