엑스를 누르고 창을 새로고침하면 계속열리고..24시간동 열지않기 체크를 하고 엑스를 누르면 새로고침해도 열리지 않게 하고 싶어요.
본문
http://www.smedi.kr/test/index_popupslide.php
위의 페이지 가보시면 오늘 하루 열지 않기 팝업슬라이드 알림창이 있어요.
이제 위의 슬라이드 팝업창에다가 아래그림의 오른쪽에 보시면
오늘하루 열지않기 + 닫기버튼을 달려고 합니다. 엑스버튼을 누르고 창을 새로고침하면 계속열리고..
24시간동 열지않기 체크를 하고 엑스버튼을 누르면 새로고침해도 열리지 않게 하고 싶어요.
아래의 소스를 보시면 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
function closeWinAt01(winName) {
$("#div_laypopup").animate({height:0}, 1000);
}
이라는 자바스크립트 함수를 하나 만들고 닫기 버튼 부분을 만들어서
onclick="closeWinAt01('div_laypopup');" 와 같이 이벤트를 지정하시면 되지 않을까 싶네요.
와우 정말 감사합니다. 자바스크립트 함수를 만들고 말씀하신대로 닫기 버튼에다 이벤트를 지정하니 해결되었습니다. 혹시나 필요하신 분들을 위해.. 소스를 적어드립니다^^
이름하여 슬라이드 팝업 오늘 하루 보지 않기 창입니다.
<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>
