-
[Javascript] jQuery 팝업창 오늘하루 그만보기Javascript 2022. 6. 27. 12:42반응형
#jQuery 팝업창 오늘하루 그만보기
쿠키를 이용한 시간설정으로 팝업창을 오늘하루 보지않게 할수 있다.
또한 쿠키 설정값을 지정하는 방법으로 24시간이 지나야 팝업이 열리게 할수있는 방법과
00 시 기준으로 초기화가 되어 팝업이 열리는 방법 두가지가 존재하는데
setCookie00() 함수를 호출할 경우 00시 기준으로 쿠키값이 초기화 되면서 팝업이 열리게 되고,
setCookie24() 함수를 호출할 경우 24시간 후에 쿠키값이 초기화 되면서 팝업이 열리게 된다.
상황에 맞는 함수를 호출해서 사용하면 될것 같다.
팝업창을 띄울때는 div 영역에 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>
팝업창 오늘 하루 보지않기!!!!
- 끝 -반응형'Javascript' 카테고리의 다른 글
[Javascript] 자바스크립트(jQuery) 를 사용한 달력 만들기 (0) 2022.07.11 [Javascript] textarea 줄바꿈 (0) 2022.07.08 [Javascript] ajax error 확인 (0) 2021.07.08 [Javascript] JQuery 상위요소(상위태그) 선택하기 or 부모요소(부모태그) 선택하기 (0) 2021.06.19 [Javascript] jQuery 사용하기 (0) 2021.04.14