채택완료

엑스를 누르고 창을 새로고침하면 계속열리고..24시간동 열지않기 체크를 하고 엑스를 누르면 새로고침해도 열리지 않게 하고 싶어요.

2015-05-15 (금) 14:31:39 4,974

http://www.smedi.kr/test/index_popupslide.php

위의 페이지 가보시면 오늘 하루 열지 않기 팝업슬라이드 알림창이 있어요.

d642587874712f98f854e1c9ace2d4b8_1431667167_4885.jpg

이제 위의 슬라이드 팝업창에다가 아래그림의 오른쪽에 보시면

오늘하루 열지않기 + 닫기버튼을 달려고 합니다. 엑스버튼을 누르고 창을 새로고침하면 계속열리고..

24시간동 열지않기 체크를 하고 엑스버튼을 누르면 새로고침해도 열리지 않게 하고 싶어요.


d642587874712f98f854e1c9ace2d4b8_1431667167_5493.jpg

아래의 소스를 보시면 24시간 동안 열지 않기 체크박스가 있고..

이소스에다가 엑스 버튼을 어떻게 추가해줘야 엑스버튼과 체크박스과 서로 연통이 되는지 궁금합니다.

아래의 소스들도 다 질문해가며.. 만든거라..^^ 가르침 부탁드립니다.

사르르 올라가는 열지 않기 팝업소스


<script language="jscript">
jQuery(document).ready(function(){
    jQuery('.scrollbar-light').scrollbar();
});
</script>
  
 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
* { margin:0; padding:0; }
#close { font:bold 12px dotum; color:#fff; cursor:pointer; }
#div1 { background:#000; width:100%; height:80px; }
#div2 { width:100%; }
#div_laypopup { background:#ccc; }
</style>
<div id="div_laypopup" align="center" style="width:100%; display:none; height:100px; overflow:hidden;">
 <div style="width:1060px; text-align:right; vertical-align:bottom;">
  <input type="checkbox" name="close" id="close" value="OK" onclick="closeWinAt00('div_laypopup', 1);"/><label for="close">Today not to open the window</label>
 </div>
</div>
<div id="div2"></div>

<script type="text/javascript">
openWin('div_laypopup');

function openWin( winName ) {
 var blnCookie = getCookie( winName );
 var obj = eval( "window." + winName );
 if( !blnCookie ) {
  obj.style.display = "block";
 }
}

function closeWinAt00(winName, expiredays) {
 setCookieAt00( winName, "done", expiredays);
 var obj = eval( "window." + winName );
 //obj.style.display = "none";
 $("#div_laypopup").animate({height:0}, 1000);
}

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 "";
}

unction setCookieAt00( 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() + ";"
}
</script>

<style type="text/css">
/*html {scrollbar-3dLight-Color: #ff0000; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #ff0000; scrollbar-Face-Color: #ffd800; scrollbar-Track-Color: #ff0000; scrollbar-DarkShadow-Color: #ff0000; scrollbar-Highlight-Color: #ff0000; scrollbar-Shadow-Color: #ff0000}*/
</style>

답변 1개 / 댓글 1개

채택된 답변
+20 포인트

function closeWinAt01(winName) {
 $("#div_laypopup").animate({height:0}, 1000);
}

이라는 자바스크립트 함수를 하나 만들고 닫기 버튼 부분을 만들어서

onclick="closeWinAt01('div_laypopup');" 와 같이 이벤트를 지정하시면 되지 않을까 싶네요.

답변에 대한 댓글 1개

와우 정말 감사합니다. 자바스크립트 함수를 만들고 말씀하신대로 닫기 버튼에다 이벤트를 지정하니 해결되었습니다. 혹시나 필요하신 분들을 위해.. 소스를 적어드립니다^^
이름하여 슬라이드 팝업 오늘 하루 보지 않기 창입니다.


<script language="jscript">
jQuery(document).ready(function(){
jQuery('.scrollbar-light').scrollbar();
});
</script>
<!-- -->
<script language="jscript">
function closeWinAt01(winName) {
$("#div_laypopup").animate({height:0}, 1000);
}
</script>

<!-- //바로가기 메뉴 -->


<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
* { margin:0; padding:0; }
#close { font:bold 12px dotum; color:#fff; cursor:pointer; }
#div1 { background:#000; width:100%; height:80px; }
#div2 { width:100%; min-width:1060px; }
#div_laypopup { background:#e4e4e4; }
</style>
<div id="div_laypopup" align="center" style="width:100%; display:none; height:100px; overflow:hidden;">
<div style="width:1060px; text-align:right; vertical-align:bottom;">
<input type="checkbox" name="close" id="close" value="OK" onclick="closeWinAt00('div_laypopup', 1);"/>Today not to open the window <!--<label for="close">Today not to open the window</label>-->
</div>
<div id="div2" style="position:relative; bottom:20px; left:500px;" onclick="closeWinAt01('div_laypopup');"><img src="../test/images/close_but.jpg" /></div>
</div>


<script type="text/javascript">
openWin('div_laypopup');

// 창열기
function openWin( winName ) {
var blnCookie = getCookie( winName );
var obj = eval( "window." + winName );
if( !blnCookie ) {
obj.style.display = "block";
}
}

// 창닫기
function closeWinAt00(winName, expiredays) {
setCookieAt00( winName, "done", expiredays);
var obj = eval( "window." + winName );
//obj.style.display = "none";
$("#div_laypopup").animate({height:0}, 1000);
}

// 쿠키 가져오기
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 "";
}

// 00:00 시 기준 쿠키 설정하기
// expiredays 의 새벽 00:00:00 까지 쿠키 설정
function setCookieAt00( 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() + ";"
}
</script>

답변을 작성하려면 로그인이 필요합니다.