jsp 팝업창 만들기

js 소스
//팝업 보이기
   var cookiedata = document.cookie;
   console.log(cookiedata.indexOf("popup=done"))
      if (cookiedata.indexOf("popup=done") < 0){
      document.getElementById('popup').style.display = "inline";
   } else {
      document.getElementById('popup').style.display = "none";
   } 
   
   if (cookiedata.indexOf("popup=done") < 0){
      document.getElementById('popup').style.display = "inline";
   } else{
      document.getElementById('popup').style.display = "none";
   }
   
   //팝업 클릭시 문구 보이게, 버튼 변경, 배경색 추가
   $('#popupBtn').click(function() {
      document.getElementById('popup').style.background = "#EDEDED"; // 팝업 배경화면 색 설정
      document.getElementById('popupBtn').style.display = "none"; // 알림서비스 버튼 숨김
      document.getElementById('goNoticeBtn').style.display = "block"; // 공지사항 자세히보기 버튼 활성화
      document.getElementById('popupNotice').style.display = "block"; // 공지사항 내용 활성화
   });
      
   // 24시간동안 보지않기 설정
   function setCookie( name, value, expirehours ) { 
      var todayDate = new Date(); 
      todayDate.setHours( todayDate.getHours() + expirehours ); 
      document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";" 
      console.log(name)
   }
   function closeWin(winName) { 
      console.log(winName)
      setCookie( winName + "", "done" , 24 ); 
      document.getElementById(winName).style.display = "none";
   }

html 소스
<div class="col-md-5" style="widows: 50px; height: 50px;">
                     <div class="layer_pop_01" id="popup" style="position: absolute; top: 600px; right: -350px; z-index: 9999999; display: inline; width: 400px; display: inline; text-align: center;">
                        <button tabindex="3" type="button" style="border: none; float: right; background: none;"
                        onclick="document.getElementById('popup').style.display='none';return false;">
                           X
                        </button>
                        <div id="popupNotice" style="vertical-align: middle; padding-top: 30px; padding-left: 30px; 
                           padding-right: 30px; display: none;">
                            <h4 style="font-weight: bold;">팝업 자세히 보기 제목</h4>
                            <br>
                            <h5>팝업 자세히 보기 소제목</h5>
                            <div id="popupContent" style="background: #ffffff; padding: 10px;">
                               <h5>
                                  팝업 자세히 보기 내용
                               </h5>
                            </div>
                         </div> 
                        <div class="layer_bottom" style="padding: 20px;">
                           <span class="checkbox" style="float: right;">
                                 <input tabindex="2" type="checkbox" title="다시보지 않기" id="check01" name="c" value="" class="" onclick="javascript:closeWin('popup');"><label for="check01">&nbsp;하루동안 보지 않기</label>
                           </span>
                              <br>  
                           <button type="button" id="popupBtn" class="" style="width: 260px; float: right;">팝업 자세히 보기</button>
                           <button type="button" id="goNoticeBtn" class="" style="display: none; width: 360px;" 
                           onClick="">
                              자세히 보기 >> 
                           </button>
                        </div>
                     </div>
                   </div>

 

실행결과

스크롤 내렸을 때 실행결과

 

하루동안 보지않기 체크 후 실행결과