ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • DIV 팝업 소스(하루동안 보이지 않음)
    Javascript 2010. 7. 27. 14:40


    현재 쓰고 있는 익스프롤러 버전이 8인데, 여기서 팝업을 띄우면 팝업창 상단에 주소가 뜨게 되어있다.
    그래서 Div로 팝업을 띄우는 소스를 찾아보았다.(하루동안 보이지 않기 기능이 있으면 더욱 좋고...)
    하지만, 완전체로 되어있는 소스는 없고 결국은 자기에게 맞도록 수정해야했따.(당연한 얘기지만...)
    현재 쓰고 있는 소스를 아래와 같이 소개한다.

    <head>
    <script type="text/javascript">
        isIE = document.all;
        isNN = !document.all && document.getElementById;
        isN4 = document.layers;
        isHot = false;
        theLayerFalg = 0;
        var ddEnabled;
       
        function ddInit(e) {
            topDog = isIE ? "BODY" : "HTML";
            whichDog = isIE ? document.all.theLayer : document.getElementById("theLayer");
            hotDog = isIE ? event.srcElement : e.target;
            while ((hotDog.id != "titleBar" && hotDog.id != "titleBar2") && hotDog.tagName != topDog) {
                hotDog = isIE ? hotDog.parentElement : hotDog.parentNode;
            }
            if (hotDog.id == "titleBar") {
                offsetx = isIE ? event.clientX : e.clientX;
                offsety = isIE ? event.clientY : e.clientY;
                nowX = parseInt(whichDog.style.left);
                nowY = parseInt(whichDog.style.top);
                ddEnabled = true;
                theLayerFalg = 0;
            }
           if (theLayerFalg == 0) document.onmousemove = dd;
        }

        function dd(e) {
            if (!ddEnabled) return;
            whichDog.style.left = isIE ? nowX + event.clientX - offsetx : nowX + e.clientX - offsetx;
            whichDog.style.top = isIE ? nowY + event.clientY - offsety : nowY + e.clientY - offsety;
            return false;
        }

        function ddN4(whatDog) {
            if (!isN4) return;
            N4 = eval(whatDog);
            N4.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
            N4.onmousedown = function(e) {
                N4.captureEvents(Event.MOUSEMOVE);
                N4x = e.x;
                N4y = e.y;
            }
            N4.onmousemove = function(e) {
                if (isHot) {
                    N4.moveBy(e.x - N4x, e.y - N4y);
                    return false;
                }
            }
            N4.onmouseup = function() {
                N4.releaseEvents(Event.MOUSEMOVE);
            }
        }

        function hideMe(flag) {
            if (flag == 1) {
                if (isIE || isNN) whichDog.style.visibility = "hidden";
                else if (isN4) document.theLayer.visibility = "hide";
            } 
        }

        function showMe() {
            if (isIE || isNN) whichDog.style.visibility = "visible";
            else if (isN4) document.theLayer.visibility = "show";
        }

        document.onmousedown = ddInit;
        document.onmouseup = Function("ddEnabled=false");

        function notice_setCookie(name, value, expiredays) {
            var todayDate = new Date();
            todayDate.setDate(todayDate.getDate() + expiredays);
            document.cookie = name + '=' + escape(value) + '; path=/; expires=' + todayDate.toGMTString() + ';'
            return;
        }
        function notice_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 "";
        }
    </script>
    </head>
    <body>
    <div id="theLayer" style="position:absolute;visibility:visible; left:130px; top: 300px;">
    <table border="0" bgcolor="#424242" cellspacing="0" cellpadding="5">
    <tr>
        <td width="100%">
            <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
            <tr>
                <td id="titleBar" width="75%" style="color:white;cursor:move;padding:2px;">
                <ilayer width="100%" onSelectStart="return false">
                <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
                <asp:Label runat="Server" style="font-weight:bold;font-size:11pt;" ID="notice" Text="공지사항" />&nbsp;(<asp:Label runat="Server"  ID="Date1" Text="" />)
                </layer>
                </ilayer>
                </td>
                </td>
                <td style="cursor:hand" width="25%" align="right">
                <a href="#" onClick="hideMe(1);return false"><font color=#ffffff style="text-decoration:none">닫기</font></a>
                </td>
            </tr>
                <td style="background-color:#ffffff;" colspan="2">
                <!-- 팝업창 내용 -->
                </td>
            </tr>
            <tr>
                <td style="height:13px; background-color:White;" colspan="2">
                </td>
            </tr>
            <tr>
                <td align=right width="300" colspan="2"><INPUT TYPE="checkbox" NAME="popupCookie2" onclick="notice_setCookie('popup','done',1);hideMe(1);"><FONT COLOR="#FFFFFF" face="굴림" size="2">하루동안 이창 보이지 않기</FONT></td>
            </tr>
            </table>
        </td>
    </tr>
    </table>
    </div>
    <script type="text/javascript">
        if (notice_getCookie("popup") == "done") theLayer.style.display = "none";
    </script>
    </body>

Designed by Tistory.