상단 고정 레이어 팝업 만들기

사이트 상단에 고정으로 배너를 놓고 오늘 이창을 열지않음 클릭 시 오늘 킬릭시간부터 24시간 계산 하여 띄워주지 않게 합니다. 꼭 상단 아니더라도 일반 레이어 팝업에서도 사용할 수 있어요!

카페24 소스기준이니 맞는 솔루션에 import 변형하시면 다 적용이 가능합니다.

[ HTML 파일내용 ]

<!-- 상단고정팝업 --><!--@css(/css/laypop.css)--><!--@js(/js/laypop.js)--><br /><!-- POPUP --><div id="divpop" class="laypopup"><a href="/member/join.html">상단배너</a>  <form name="notice_form" class="bt">  <input type="checkbox" name="chkbox" value="checkbox">오늘 이 창을 열지 않음  <a href="javascript:closeWin();"><B>[닫기]</B></a>  </form></div> 

<script language="Javascript"> cookiedata = document.cookie;     if ( cookiedata.indexOf("maindiv=done") < 0 ){        document.all['divpop'].style.display = "block";  }   else {   document.all['divpop'].style.display = "none";  } </script>

[ CSS 임포트 ]

.laypopup {text-align:center; overflow:hidden; position:relative; width:100%;} .laypopup .bt { position:absolute; bottom:10px; right:30px; font-size:16px; line-height:20px} .laypopup .bt span:hover {text-decoration:underline} .laypopup .bt input {width:20px; height:20px; margin:0; cursor:pointer} .laypopup a p {background:url('/nimo/images/top_pop.jpg') center; height:90px; text-indent:-10000px}

[ JS 임포트 ]

<!-- function setCookie( name, value, expiredays ) {   var todayDate = new Date();    todayDate.setDate( todayDate.getDate() + expiredays );    document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"   } <br /> function closeWin() {   if ( document.notice_form.chkbox.checked ){    setCookie( "maindiv", "done" , 1 );   }   document.all['divpop'].style.display = "none"; } //-->  

http://ecudemo63206.cafe24.com/

위는 실제로 제작된 참고 사이트 입니다.