본문으로 건너뛰기

팝업창 기본 소스는 어떻게 되나요?

💡 요약 정리

  • 홈페이지 호스팅(빌더)에서 사용할 팝업창 기본 소스 전체를 제공합니다.
  • 포함 기능: 팝업만 닫기, 닫으면서 본창(URL) 이동, 하루 동안 띄우지 않음(쿠키).
  • 소스는 고객이 직접 적용해야 하며, 어려우면 웹사이트 제작자/디자인 관리자에게 의뢰하세요.

1. 사용 전 안내

  • 본 내용은 팝업창 만들기 도움말과 관련하여 확인해 주세요.
  • 홈페이지 호스팅(빌더) 소스 설정은 고객님이 직접 진행해야 합니다.
  • 적용이 어려우시면 웹사이트 제작자 또는 디자인 관리자에게 의뢰하시길 권장합니다.

2. 팝업창 기본 소스 전체

< html>
< head>
< title>팝업테스트</title>
< script language="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.ncook_"팝업인덱스".checked == true)
 {
 setCookie("ncook_"팝업인덱스"", "done" ,1);
 }
 self.close();
 }
 //-->
< /script>
< /head>
< body bgcolor="#FFFFFF" text="#000000" topmargin=0 leftmargin=0>
< table width="515" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
< !-- 클릭하면 팝업창 닫히는 예제 소스 시작 -->
< table>
<tr>
<td>
<a href="#" onclick="closeWin()" style=border:0 align='absmiddle'><img src='http://home.cafe24.com/img/wiz_popup_01.gif' border="0"><br><BR>
▲ 클릭하면 팝업창만 닫힙니다. </a>
</td>
</tr>
< /table>
< !-- 클릭하면 팝업창 닫히는 예제 소스 끝 -->
< !-- 클릭하면 팝업창이 닫히면서, 본창을 지정한 URL로 이동시키는 소스 예제 시작 -->
< table width="515">
<tr>
<td align="center" height="260"><a href="#" onclick="opener.location.href ='http://home.cafe24.com/builder_is/wizard.php?submenu=wizard'; self.close();"><img src="http://home.cafe24.com/img/wiz_but.gif" width="185" height="39" border="0"><BR>
<BR> ▲ 클릭하면 팝업창이 닫히면서 본창을 지정한 URL 로 이동시킵니다. </a></td>
</tr>
< /table>
< !-- 클릭하면 팝업창이 닫히면서, 본창을 지정한 URL로 이동시키는 소스 예제 끝 -->
< !-- 하루동안 띄우지 않음 예제 소스 시작 -->
< table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>
< form name="checkClose">
<tr>
<td>
<input type="checkbox" name="ncook_"팝업인덱스"" onclick="closeWin();" style='margin-bottom:-2'>하루동안 띄우지 않음
<a href="#" onclick="closeWin()"><img src='http://home.cafe24.com/img/icon_close.gif' style=border:0 align='absmiddle'></a> 
</td>
</tr>
< /form>
< /table>
< !-- 하루동안 띄우지 않음 예제 소스 끝 -->
</td>
</tr>
< /table>
< /body>
< /html>

3. 소스 구성 설명과 활용 팁

  • 클릭 시 팝업 닫기
    • 이미지/링크를 클릭하면 현재 팝업 창만 닫습니다. onclick="closeWin()"을 그대로 사용합니다.
  • 닫으면서 본창(URL) 이동
    • 팝업을 닫는 동시에 본창을 특정 URL로 이동시킵니다.
    • 이동할 주소를 opener.location.href = '원하는_URL'; 부분에 입력하세요.
  • 하루 동안 띄우지 않음(쿠키)
    • 체크박스를 클릭하면 setCookie 함수를 통해 ncook_"팝업인덱스" 쿠키가 1일로 설정되어, 팝업이 하루 동안 다시 나타나지 않도록 처리합니다.

Tip

  • 이미지 경로(src)나 이동 URL은 사이트 운영 환경에 맞게 수정해 활용하세요.
  • 브라우저의 팝업 차단 설정에 따라 동작이 제한될 수 있습니다. 문제가 있을 경우 브라우저 팝업 허용 상태를 확인해 보세요.