JavaScript 팝업 / 오늘 하루 창 열지 않기
페이지 정보
본문
페이지가 로딩되면서 새창이 뜨는 공지사항이나 이벤트창에서 이런거 많이보셨을겁니다.
오늘 하루동안 창열지 않기
이건 사용자가 이 체크박스에 체크를 하면 그 쿠키를 읽어서 하루동안은 다시 새창을 열리지 않게 하는거죠. 계속해서 공지창이 뜨면 사실 조금 짜증이 나거든요.
아무리 광고도 좋지만 이정도의 예의를 갖춰준다면 사용자가 더 기쁘겠죠?
여기서는 두군데다가 스크립트를 넣어줘야 합니다.
일단 새창으로 띄워질 html파일에는 체크를 하면 창이 저절로 닫히게하는스크립트를 넣어줘야하구요.
그리고 새창을 띄울파일에는 그 창이 사용자가 체크를 했는지 안했는지,했다면 하루가 지났는지를 체크하는 스크립트를 넣어줘야 합니다.
[ 방법 1 ]
① 새창을 띄우는 파일(index.htm)
엄마파일이라고해두죠.보통은 그 계정에 들어가자마자 새창이 뜨자나요.
거기서의 index파일입니다.
여기에는 사용자가 체크를 했는지 안했는지,했다면 하루가 지났는지를 체크하는 스크립트가 들어갑니다.
<head>와 </head>사이에 넣어주세요.
<script type="text/JavaScript">
<!--
function getCookie(name) {
var Found = false
var start, end
var i = 0
// cookie 문자열 전체를 검색
while(i <= document.cookie.length) {
start = i
end = start + name.length
// name과 동일한 문자가 있다면
if(document.cookie.substring(start, end) == name) {
Found = true
break
}
i++
}
// name 문자열을 cookie에서 찾았다면
if(Found == true) {
start = end + 1
end = document.cookie.indexOf(";", start)
// 마지막 부분이라는 것을 의미(마지막에는 ";"가 없다)
if(end < start)
end = document.cookie.length
// name에 해당하는 value값을 추출하여 리턴한다.
return document.cookie.substring(start, end)
}
// 찾지 못했다면
return ""
}
function openMsgBox() {
var eventCookie=getCookie("쿠키이름_cook"); // 쿠키이름_cook 은 임의로 꼭 변경하세요.
if (eventCookie != "no")
window.open('popup.html','_blank','width=400,height=450,top=50,left=100');
//팝업창의 주소, 같은 도메인에 있어야 한다.
}
openMsgBox();
//-->
</script>
popup.html은 새창으로 띄울 파일경로
_blank 는 새창이란 뜻
width=400,height=450 는새창의 가로세로 크기
top=50,left=100 새창의 띄워질 위치
② 새창으로 열려질 파일 (popup.html)
새창으로 열려질 파일안에다가 써줘야하는스크립트입니다.
여기에서는 체크를 하면 창이 저절로 닫히게하는스크립트를 넣어줍니다.
<head>와 </head>사이에 넣어주세요.
<script type="text/JavaScript">
<!--
function setCookie( name, value, expiredays ) {
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function closeWin() {
if ( document.checkClose.event.checked )
setCookie("쿠키이름_cook", "no" , 1); // 쿠키이름_cook 은 위의 index와 같은 이름으로 변경
}
//-->
</script>
cook_name은 쿠키 이름이구요, 위의 index에서 적은것과 같은 값을 써주세요.
1은 기한(expiredays)을 말하는 것으로 하루를 의미합니다. 원하시는 날짜만큼 써주면 되겠죠?
checkClose은 Form Name입니다. (아래쪽에 나옵니다. 체크박스)
event은 Input Name입니다. (아래쪽에 나옵니다. 체크박스)
그리고 <body>안에다가 onunload="closeWin()"라고 써주세요.
<body onunload="closeWin()">
자 그다음엔 체크박스에다가 이렇게 써주세요.
<form name="checkClose" style="padding:0px; margin:0px;">
<div style="float:left; background-color:#000000; color:#ffffff; padding-left:10px;"><input type="checkbox" name="event" onclick="check_window();" />하루동안 이 창 띄우지 않음</div>
<div style=" background-color:#000000; color:#ffffff; padding-right:10px;" align="right"><a href="javascript:self.close();"><img src="images/btn_close.gif" border="0" alt="창닫기" /></a></div>
</form>
창닫기 이미지 대신에 그냥 텍스트로 넣으셔도 됩니다.
이건 테스트하고 하루를 지나야 되는지 안되는지 알수 있어요.
하루동안 새창이 열리지말라고 했으니까요.
하루 이전에 팝업을 다시 보려면?
브라우저의 도구>옵션 에서 쿠키값을 삭제하면 다시 팝업을 볼수 있습니다.
[ 방법2 - PHP ] 2014-09-09
방법1 이 중복창이 뜨는 버그로 인하여 아래에 새로운 팝업 뜨기 내용을 정리했습니다.
아래 예제는 PHP 용으로 제작하였으나, ASP 등 다른 언어는 약간의 소스 수정이 필요합니다.
1. phpup.php ... 팝업이 새창으로 뜨는 문서 작성
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>::: 알려드립니다. :::</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body, td, input { font-size: 9pt; line-height: 14pt; color: #000000; font-family:"굴림" }
-->
</style>
<?php
$cookie_days = "1"; // 팝업안뜨는 기간 (일)
?>
<script type="text/javascript">
<!--
function setCookie( name, value, expiredays ) {
var expire_date = new Date() ; //오늘날짜를 대입값으로 설정한다.
expire_date.setDate(expire_date.getDate() + expiredays) ;
document.cookie = name + "=" + escape( value ) + "; path=/" + "; expires=" + expire_date.toGMTString();
}
function check_close() {
if(document.popupform.szcheck.checked==true) {
setCookie("happyjung_popup_<?php echo $_GET['cookieIdx']?>", "done",<?php echo $cookie_days; ?>);
self.close();
} else {
self.close();
}
}
-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/popup/img.jpg" width="498" height="673" border="0"></td>
</tr>
<tr>
<td colspan="4"><form name='popupform' style="margin:0;"><table width="100%" height="30" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td style="padding-left:10px;"><label for="close"><input type="checkbox" name="szcheck" onclick="check_close();">
<span style="color:#ffffff">하루동안 이 창 열기 않기</span></label></td>
<td align="right" style="padding-right:5px;"><input type="button" value=" 닫 기 " class="input_button" onClick="self.close();"></td>
</tr>
</table></form></td>
</tr>
</table>
</body>
</html>
2. index.html 에 삽입할 내용 ...
<script type="text/javascript">
<!--
<?php
// 팝업1 시작
$PopupIdx = "20140602"; // 팝업고유번호
$PopupX = "10"; // 팝업창 X좌표
$PopupY = "50"; // 팝업창 Y좌표
$PopupWidth = "500"; // 팝업창 폭
$PopupHeight = "500"; // 팝업내용 높이
$PopupHeight = $PopupHeight + 30; // (하루안뜨기 포함)
if(strpos($_SERVER['HTTP_USER_AGENT'],'Chrome') == true) {
} else {
$PopupWidth = $PopupWidth - 4;
$PopupHeight = $PopupHeight - 4;
}
if(strpos($_SERVER['HTTP_USER_AGENT'],'Firefox') == true) {
$PopupHeight = $PopupHeight - 12;
}
$PopupCookieName = "happyjung_popup_". $PopupIdx;
if ($_COOKIE[$PopupCookieName] != "done") {
echo "window.open( '../popup/2014_1103/popup.php?PopupIdx=". $PopupIdx ."', 'happyjung_popup_". $PopupIdx ."', 'scrollbars=no, width=". $PopupWidth .", height=". $PopupHeight .", left=". $PopupX ." , top=". $PopupY .", status=no');";
}
// 팝업1 끝
?>
//-->
</script>
[ 방법2 - ClassicASP ]
1. phpup.asp ... 팝업이 새창으로 뜨는 문서 작성
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>::: 알려드립니다. :::</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body, td, input { font-size: 9pt; line-height: 14pt; color: #000000; font-family:"굴림" }
-->
</style>
<%
dim cookie_days
cookie_days = "1" ' 팝업안뜨는 기간 (일)
%>
<script type="text/javascript">
<!--
function setCookie( name, value, expiredays ) {
var expire_date = new Date() ; //오늘날짜를 대입값으로 설정한다.
expire_date.setDate(expire_date.getDate() + expiredays) ;
document.cookie = name + "=" + escape( value ) + "; path=/" + "; expires=" + expire_date.toGMTString();
}
function check_close() {
if(document.popupform.szcheck.checked==true) {
setCookie("happyjung_popup_<% response.write request("cookieIdx") %>", "done",<% response.write cookie_days %>);
self.close();
} else {
self.close();
}
}
-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/popup/img.jpg" width="498" height="450" border="0"></td>
</tr>
<tr>
<td colspan="4"><form name='popupform' style="margin:0;"><table width="100%" height="30" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td style="padding-left:10px;"><label for="close"><input type="checkbox" name="szcheck" onclick="check_close();">
<span style="color:#ffffff">하루동안 이 창 열기 않기</span></label></td>
<td align="right" style="padding-right:5px;"><input type="button" value=" 닫 기 " class="input_button" onClick="self.close();"></td>
</tr>
</table></form></td>
</tr>
</table>
</body>
</html>
2. index.asp 에 삽입할 내용 ... 하루안뜨기 오류 ... 보완 필요
<script type="text/javascript">
<!--
<%
' 팝업1 시작
dim PopupIdx, PopupX, PopupY, PopupWidth, PopupHeight, PopupCookieName
PopupIdx = "20141104" ' 팝업고유번호
PopupX = "10" ' 팝업창 X좌표
PopupY = "50" ' 팝업창 Y좌표
PopupWidth = "500" ' 팝업창 폭
PopupHeight = "500" ' 팝업창 높이
dim strUserAgent ' 브라우저 타입
dim Chrome, Firefox ' 브라우저 종류 및 버전
Firefox = FALSE
If InStr(strUserAgent, "Firefox") or InStr(strUserAgent, "FIREFOX") then
Firefox = TRUE
end If
Chrome = FALSE
If InStr(strUserAgent, "Chrome") then
Chrome = TRUE
end If
Safari = FALSE
If InStr(strUserAgent, "Safari") or InStr(strUserAgent, "SAFARI") then
Safari = TRUE
end If
PopupHeight = PopupHeight + 30; // (하루안뜨기 포함)
If Chrome then
else
PopupWidth = PopupWidth - 4;
PopupHeight = PopupHeight - 4;
end if
if Firefox then
PopupHeight = PopupHeight - 3;
end if
PopupCookieName = "happyjung_popup_"& PopupIdx
response.cookies("PopupCookieNameCheck") = PopupCookieName
CookiePopupName = Request.cookies("PopupCookieNameCheck")
if CookiePopupName = "done" then
else
response.write "window.open('popup.asp?PopupIdx="& PopupIdx &"', 'happyjung_popup_"& PopupIdx &"', 'scrollbars=no, width="& PopupWidth &", height="& PopupHeight &", left="& PopupX &", top="& PopupY &", status=no');"
end if
' 팝업1 끝
%>
//-->
</script>
댓글목록
등록된 댓글이 없습니다.