개발

간단한 div 팝업

에드몽단테스 2011. 1. 31. 20:49
말 그대로 정말 초간단 div 팝업입니다.
div의 이동이나 크기조절은 없고 쿠키를 이용해 '열지않음' 기능만 있습니다.
팝업내용도 이미지만 이용합니다.


우선 자바스크립트를 선언합니다.

<script type="text/javascript">
//<![CDATA[
function getCookie(sName) {
var aCookie = document.cookie.split("; ");
    for (var i = 0; i < aCookie.length; i++) {
          var aCrumb = aCookie[i].split("=");
          if (sName == aCrumb[0]){
                return unescape(aCrumb[1]);
          }
     }
     return null;
}
function setCookie(name, value, expiredays) {
    var todayDate = new Date();
    todayDate.setDate(todayDate.getDate() + expiredays);
    document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

// 팝업이미지를 넣을 경로를 지정합니다.
function addPopup(imagename, top, left, width, height){
    var popup = document.getElementById('popupID');
    var src = '<img src=../images/popup/'+imagename+' alt="" />';
    src += '<div style="border:1px solid #b1b1b1;margin-bottom:1px;color:white;background-color:black;text-align:right;height:20px;padding-right:5px;">하루동안 열지 않음 <input type="checkbox" onclick="hidePopup(\'popupID\', \'ok\', \'1\');" /></div>';
    popup.innerHTML = src;
    popup.style.top = top+'px';
    popup.style.left = left+'px';
    popup.style.width = width+'px';
    popup.style.height = height+'px';
    popup.style.display = 'block';
}
function hidePopup(name, value, expiredays){
    setCookie(name, value, expiredays);
    var popup = document.getElementById(name);
    popup.style.display = 'none';
}
window.onload = function(){
    if(getCookie('popupID') != 'ok'){
        // 이미지이름, 위치(위,아래), 폭(가로), 높이(세로)
        addPopup('popup.gif', '10', '10', '233', '110');
    }
};
//]]>
</script>



그리고 팝업이 위치할 위치에 div를 넣어줍니다.
body 태그 바로 밑에 두는 것이 좋겠죠?

<div id="popupID" style="z-index:100;position:absolute;background-color:white;display:none;"></div>


그러면 다음과 같은 간단한 팝업이 뜹니다.


반응형