ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 간단한 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>


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


    반응형

    댓글

Designed by Tistory.