[JS] 오늘 하루 보지 않기 기능 구현 (쿠키이용)

hyewon jeong·2025년 4월 3일
0

web

목록 보기
25/25

🎈 1. JSP

	<div class="popup detail-cmn user-pop chkPop expiryPopup closeed">
		<div class="box">
			<div class="pop-head flex user-titBx">
				<div class="flex tit">
					<h4>마료 안내</h4>
				</div>
				<button type ='button' class="close-btn close expiryPopup_btn">
					<img src="<c:url value='/resources/images/icon/ico_popup_close.png'/>" alt="팝업닫기" class="icon">
				</button>
			</div>
			<div class="pop-body">
				<p class="msg-txt">
					 만료일이 <span class="bold">1개월</span> 남았습니다. <br>
					재신청을 진행하시려면 <a href="<c:url value='/uat/api/authStatus.do' />" class="hyperlink" title="바로가기">바로가기</a>를 클릭해 주세요.
				</p>
				<div class="chk-dayBx flex">
					<input type="checkbox" id="expChkBxDay">
					<label for="expChkBxDay">하루동안 보지 않기</label>
				</div>
			</div>
		</div>
		<div class="bg"></div>
	</div>

🎈 2. JS

		expiryPopupRoad: function() {
			var cookie = document.cookie.includes('expHidePopup=true');
			if(cookie){
				$(".expiryPopup").addClass("closeed");
			}else{
				if(expryYmdStts == 'expiredKey'){
					$(".expiryPopup").removeClass("closeed");
				}else{
					$(".expiryPopup").addClass("closeed");
				}
			}
		},


		expHidePopupToday : function() {
			let $popup = $(".expiryPopup");
			let hour = 24;

			$popup.on("click","#expChkBxDay",function (e){
				e.preventDefault();
				$popup.removeClass("closeed");
				let expHidePopup = $('#expChkBxDay').prop('checked');
				if(expHidePopup){
					var d = new Date();
					d.setTime(d.getTime()+(hour*60*60*1000));
					let expires = `expires=$(d.toUTCString()}`;
					document.cookie = `expHidePopup=true; ${expires}; path=/`;
					$popup.addClass("closeed");
				}
			});
		},
profile
개발자꿈나무

0개의 댓글