web standard/script2011. 6. 16. 15:08

레이어팝업(오늘하루창닫기) 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=euc-kr" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>레이어팝업 데모</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body {
            font-family:Dotum,"돋움",Verdana,sans-serif;
            font-size:12px;
            line-height:14px;
        }
        div#wikiWrap {
            position:relative;
            width:760px;
            height:442px;
        }
        div#son {
            position:absolute;
            top:30px;
            right:150px;
            width:430px;
            height:311px;
            padding:10px 10px 30px;
            background:#FFF;
        }
        div#son div {
            overflow:hidden;
            width:100%;
            padding-top:3px;
        }
        div#son div p {
            float:left;
            margin-top:5px;
        }
        div#son div p input {
            width: 13px;
            height: 13px;
            vertical-align: middle;
        }
        div#son div button {float:right;}
    </style>
    <script type="text/javascript">
    //쿠키생성과 닫기기능
        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 "";
        }
        function DivTodayClose()
        {
            setCookie( "popCookie", "done" , 1 ); //popCookie : 쿠키의 네이밍은 임의 설정하면 됨.
            document.getElementById('son').style.display = "none"; //son : 레이어팝업 id 연결
        }
        function DivClose()
        {
            document.getElementById('son').style.display = "none";
        }
        function setCookie( name, value, expiredays )
        {
            var today = new Date();
            today.setDate( today.getDate() + expiredays );
            document.cookie = name + "=" + escape(value) + "; path=/; expires=" + today.toGMTString() + ";";
        }
    </script>
    <script type="text/javascript">
    //레이어팝업 드래그기능
        var dragapproved=false
        var minrestore=0
        var initialwidth,initialheight
        var ie5=document.all&&document.getElementById
        var ns6=document.getElementById&&!document.all
        function iecompattest(){
            return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }
        function drag_drop(e){
            if (ie5&&dragapproved&&event.button==1){
                document.getElementById("son").style.left=tempx+event.clientX-offsetx+"px"
                document.getElementById("son").style.top=tempy+event.clientY-offsety+"px"
            }
            else if (ns6&&dragapproved){
                document.getElementById("son").style.left=tempx+e.clientX-offsetx+"px"
                document.getElementById("son").style.top=tempy+e.clientY-offsety+"px"
            }
        }
        function initializedrag(e){
            offsetx=ie5? event.clientX : e.clientX
            offsety=ie5? event.clientY : e.clientY
            tempx=parseInt(document.getElementById("son").style.left)
            tempy=parseInt(document.getElementById("son").style.top)
 
            dragapproved=true
            document.getElementById("son").onmousemove=drag_drop
        }
        function stopdrag(){
            dragapproved=false;
            document.getElementById("son").onmousemove=null;
        }
    </script>
    </head>
    <body>
        <div id="wikiWrap">
            <img src="http://doctype.kr/wiki/lib/exe/fetch.php?media=%E3%84%B9:mother.jpg" alt="바닥페이지" />
            <div id="son" style="position:absolute; cursor:move; left:150px; top:30px;" onmousedown="initializedrag(event)" onmouseup="stopdrag()"><!-- 드래그 기능을 위해 펑션 연결 -->
                <img src="http://doctype.kr/wiki/lib/exe/fetch.php?media=%E3%84%B9:son.jpg" alt="" />
                <div>
                    <p>
                        <input type="checkbox" id="todayClose" onclick="DivTodayClose();" title="24시간동안 창을 열지 않습니다." />
                        <label for="todayClose">오늘 하루 이창을 열지 않습니다.</label>
                    </p>
                    <button type="button" title="닫기" onclick="DivClose();"><span>닫기</span></button>
                </div>
                <script type="text/javascript">
                //생성한쿠키 연결, 오늘 하루 창을 열지않기 기능을 위해 아래 소스가 필요.
                    cookiedata = document.cookie;
                    if ( cookiedata.indexOf("popCookie=done") < 0 ) //popCookie : 쿠키의 네이밍 연결.
                    {     
                        document.getElementById('son').style.display = "block"; //son : 레이어팝업 id 연결
                    }
                        else
                    {
                        document.getElementById('son').style.display = "none";
                    }
                </script>
            </div>
        </div>
    </body>
</html>

'web standard > script' 카테고리의 다른 글

자바스크립트(Javascript)로 동적으로 생성한 HTML 소스보기  (0) 2011.08.10
오늘하루 창닫기 소스  (0) 2011.06.27
탭메뉴 스크립트  (0) 2011.01.06
클릭시 특정id의 class변경  (0) 2011.01.06
라디오버튼체크시 레이블스타일변경 스크립트  (0) 2010.11.17
Posted by 수라

티스토리툴바