웹마스터 팁

팝업창 띄우기

2008.03.16 13:53

레망

제로보드 4 를 쓸때부터 홈페이지에 적용해서 쓰던 팝업창 소스를 제로보드 XE에서 적용하여 현재 쓰고 있는 방법입니다.
소스는 예전부터 여기저기 블로그 등에서 공개되었던 것으로 지금 현재도 사용시에 별문제가 없어서 계속 쓰고 있습니다.
다른 방법도 있으리라 생각되지만.. 혹 필요한 분이 계실까봐 조금이나마 도움이 되시라 올려봅니다.

우선 자신이 사용하고 있는 레이아웃의 디렉토리 속에 있는 JS 디렉토리 속의 xe_official.js 파일을 불러와서 편집을 합니다.

기본 레이아웃을 쓴다고 전제를 하고.. 기존의 xe_official.js 파일의 마지막 부분에 빨간 글씨 부분을 추가합니다.

// Hide And Show Toggle
var cc=0
function hideShow(id) {
    if (cc==0) {
        cc=1
        document.getElementById(id).style.display="none";
    } else {
        cc=0
        document.getElementById(id).style.display="block";
    }
}

// Show And Hide Toggle
var cc=0
function showHide(id) {
    if (cc==0) {
        cc=1
        document.getElementById(id).style.display="block";
    } else {
        cc=0
        document.getElementById(id).style.display="none";
    }
}

// Local Navigation Toggle
function lnbToggle(id) {
 for(num=1; num<=3; num++) document.getElementById('D3MG'+num).style.display='none'; //D4MG1~D4MG3 까지 숨긴 다음
 document.getElementById(id).style.display='block'; //해당 ID만 보임
}

// IS
function chkIsKind(key, value) {
    showHide('selectOrder');
    xGetElementById('+ '+ 'search_target'+key).checked = true;
    xInnerHtml('search_target_label', value);
}

//팝업창
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 "";
}

if (getCookie("no_pop") != "ok" )        //no_pop 이라는 이름의 쿠키값이 ok 가 아니라면 다음의 새창 띄우기를 실행
{
 window.open("pop_up.htm","hi", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width = 360 height = 320");       //파일 이름과 속성을 자신에 맞게 수정하면 됩니다.
}



제일 마지막 부분의 width=360 height=320 은 팝업창의 크기이니 원하는 크기로 지정하시면 됩니다.
추가가 되었으면 저장을 하시고 그 파일을 서버에 있는 같은 위치의 xe_official.js 파일에 덮어쓰기를 합니다. 


이제 팝업창을 제작합니다.
새파일을 만들어서 다음 빨간 글씨를 복사해서 붙여 넣은 다음 원하는 팝업창 메세지를 작성하시고
pop_up.htm으로 저장합니다. 그 pop_up.htm 파일을 서버에 zbxe 디렉토리에 업로드 시키면 됩니다.

<!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">
<SCRIPT language="JavaScript">
<!--
function setCookie(name,value,expiredays)        //쿠키를 사용자에게 전달할 함수만들기
                                                                                        //setCookie(쿠키이름,쿠키값,쿠키만료시간)
    {
        var todayDate = new Date();
        todayDate.setDate(todayDate.getDate() + expiredays);
        document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
    }

function closeWin()
{
        if (cookie_form.chk.checked)        //체크박스에 체크되 있다면(폼 이름,체크박스 이름을 맞춰주세요.)
                        setCookie("no_pop","ok",1);        //쿠키이름은 no_pop,쿠키값은 ok,쿠키만료 기간은 1 일로 쿠키생성
                                                                                //혹시 no_pop 이라는 이름의 쿠키를 이미 사용하고 있다면 이름을 바꿔주세요

        self.close();        //창 닫기
}
// -->
</SCRIPT>
</head>

<body>
이곳에 원하시는 메세지를 편집해서 써 넣으시고..

     <form name = "cookie_form">
        <div align="right">
          <input type = "checkbox" name = "chk">
          <font size="2" face="굴림" color="#003366"><strong>오늘 다시 열지 않기</strong></font>
          <input type = "button" value = "Close" onClick = "closeWin();">
        </div>
      </form>
</body>
</html>




설명이 제대로 됐나 모르겠네요.
초보가 맨날 도움만 받다가 혹시나 필요하신분이 계신것 같아서 용기내어 올려봅니다.

제목 글쓴이 날짜
XHTML 과 CSS 오류검사를 해주는 사이트 입니다. 디테일 2014.06.07
회원정보에서 '서명' 수정이 반영되지 않을 경우 Novelic 2014.06.03
홈페이지에 접속한 장치의 너비 구하기 [3] CosignStudio 2014.05.28
익스플로러의 자동완성 기능 off 하기 [7] WOWpc 2001.10.23
스크롤바 색깔 바꾸는 스타일... [8] 잔디 2001.01.05
[1초팁] Google Fonts의 폰트파일이 XE템플릿 문법으로 불러와지지 않을때 mAKEkr 2014.05.31
게시판 comment 스타일 수정 웹빌드ver2 2014.05.30
Mysql DB사용량 출력하기 [4] 대류 2012.01.01
유저가 자신의 회원정보 전체를 공개/비공개 설정하게 하는 방법 [2] sejin7940 2014.05.27
윈도에서 버츄얼박스 실행 시에 작업표시줄에 보이지 않게 하기 hyun 2014.05.26
사용자정의에서 날짜형의 경우, 달력의 년수 선택범위를 늘리는 방법 sejin7940 2014.05.24
Draggable Captcha System for XE1.7.5 Member Module (QapTcha) [7] file 우진홈 2014.05.21
메뉴가 많을때 레이아웃 쉽게 변경하기 웹빌드ver2 2014.05.23
XE 코어 1.7 버전에서 최근이미지 출력하기 [1] file 때린데 또때려 2013.12.14
스팸 회원 삭제시 동시에 관련 글 / 댓글 자동 삭제 + 스팸IP 등록기능 구현방법입니다 [20] sejin7940 2013.05.22
1.7.5에서 추가된 게시물당 최신댓글 불러오기 스킨에서 활용법 [2] file mAKEkr 2014.05.20
xe_documents DB 테이블이 깨져서 게시판이 엉망이 됄경우 file 지으니 2014.05.17
스케치북 추천+등록을 활용한 비추천+등록 버튼 만들기 [2] file oscarmike 2014.05.16
1.7.3.4 + sketchbook5 에서 대댓글 에디터 사용불가문제 [4] 뒤뒤 2013.08.07
XE CDN 서비스 중단에 대응하는 CDN 주소 변경법 (자신의 CDN서버로) [2] Stellar 2013.11.08