티스토리 뷰
쿠키 설정을 쉽게 하기 위해 npm라이브러리 js-cookie를 사용했다.
대략적인 flow는 아래와 같다
1. index.html에 접속하면 pop up창이 뜬다.
2-1. pop up 창에서 인풋 박스에 체크를 하면 popupCheck라는 키값과 no라는 밸류를 가진 쿠키를 브라우저에 저장한다
2-2. 동시에 pop up창은 닫힌다
3. index.html은 항상 popupCheck 쿠키가 있는지 확인한다. popupCheck 쿠키의 밸류가 no라면 popup을 띠우지 않는다
popUp.html
<head>
//쿠키 설정 npm 라이브러리
<script src="<https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js>"></script>
<script type="text/javascript">
function closePopup(){
if(document.getElementById("check").value){
Cookies.set('popupCheck', 'no', { expires: 24 });
}
//자기 자신을 닫는 dom method
self.close();
}
</script>
</head>
<body>
<div>
<img src="popup.gif" style="max-width:100%;">
<div style="text-align: center">
<input type="checkbox" id="check" onclick="closePopup()"><fontsize=3> <b>더 이상 보지 않기</b>
</div>
</div>
</body>
</html>
closePopup 함수를 통해 인풋박스가 체크가 되면 (getElementById로 확인) 쿠키를 세팅한 후
self.close() 메소드를 통해 자기 자신( popup창 )을 닫는다
index.html
<head>
//쿠키 설정 npm 라이브러리
<script src="<https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js>"></script>
<script type="text/javascript">
function closePopup(){
if(document.getElementById("check").value){
Cookies.set('popupCheck', 'no', { expires: 24 });
}
//자기 자신을 닫는 dom method
self.close();
}
</script>
<script type="text/javascript">
function popUp(){
if(Cookies.get("popupCheck") !== "no"){
window.open("popUp.html",
"tap",
"width=400,height=450,resizable,status=1")
}
}
</script>
</head>
<body onload="javascript:popUp()">
</dody>
body에 onload를 통해 body가 로드 될 때 popUp함수를 실행한다
popUp함수는 쿠키를 확인하는 함수이며 쿠키의 값에 따라 window.open메소드를 통해 popup을 띄운다
첫번째 인자는 팝업을 띠울 html파일
두번째 인자는 어떤 것을 뜻하는지 아직 모호하다. ( mozila의 예시를 가지고 왔다 )
세번째 인자는 팝업창의 크기를 지정한다
반응형
'JavaScript' 카테고리의 다른 글
object의 Enumerable 설정하는 방법 (0) | 2021.06.10 |
---|---|
로그인 회원가입 input 영어만 입력 (0) | 2019.07.31 |
JSON 이란 (1) | 2019.03.31 |
javascript 상속 (prototype / class) (0) | 2019.03.21 |
es6문법 비구조화 할당 (0) | 2019.03.07 |
댓글
공지사항