티스토리 뷰

JavaScript

자바스크립트로 팝업창 구현

Aairon 2019. 7. 8. 23:51
반응형

쿠키 설정을 쉽게 하기 위해 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
댓글