web standard/jquery2011. 11. 16. 14:32
<iframe id="PayIFrame"></iframe>


1. src 바꾸기.
$("#PayIFrame").attr("src", "http://www.shop-wiz.com");

2. iframe  내의 문서 객체 접근
iframe 속의 문서에 <div id="target"></div>

$("#PayIFrame").contents().find("#target").html();


3. 부모문서에 접근
$("#parent_id", parent.document)


4. 부모문서의 다른 iframe 접근
$("#parent_id", parent.frames["frame_id"].document)

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

이미지 순차적으로 스위칭  (0) 2012.01.26
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
로그인 입력폼 description 제어  (0) 2011.11.09
이미지 슬라이드  (0) 2011.11.08
탭메뉴+prev, next  (0) 2011.08.08
Posted by 수라
web standard/jquery2011. 11. 9. 11:44

1.로그인창에서 아이디/비번 인풋영역에 설명이 bg로 깔린상태
2.포커싱되면 bg삭제, blur되면 bg 온.
  단, 입력값이 있을때는 blur되도 bg삭제 유지.

[SCRIPT]
<script type="text/javascript">
$(document).ready(function() {
    $(".top-menu .itp-id").focus(function() {
        $(".itp-id").removeClass("empty");
    });
    $(".top-menu .itp-id").blur(function() {
        $(".itp-id").addClass("empty");
    });
    $(".top-menu .itp-pw").focus(function() {
        $(".itp-pw").removeClass("empty");
    });
    $(".top-menu .itp-pw").blur(function() {
        $(".itp-pw").addClass("empty");
    });
    $(".itp-id").each(function() {
        $(this).blur(function() {
            var data=$(this).val();
            var len=data.length;
            if(len<1) {
                $(".itp-id").addClass("empty");
            }
            else {
                $(".itp-id").removeClass("empty");
            }
        });
    });
    $(".itp-pw").each(function() {
        $(this).blur(function() {
            var data=$(this).val();
            var len=data.length;
            if(len<1) {
                $(".itp-pw").addClass("empty");
            }
            else {
                $(".itp-pw").removeClass("empty");
            }
        });
    });
});
</script>

[HTML]
<form method="post" action="">
                <fieldset>
                    <legend>로그인 폼</legend>
                    <ul class="top-menu">
                        <li><input type="text" class="itp-id empty" id="emailId" /> <input type="password" class="itp-pw empty" id="pass" /> <a href="#"><img src="/images/common/btns_login.gif" alt="로그인" /></a></li>
                    </ul>
                </fieldset>
            <form>

[CSS]
#emailId.empty, #pass.empty {background:url('/images/common/bg_dec01.gif') no-repeat; }
#emailId.empty {background-position:0px 0px; }
#pass.empty {background-position:0px -19px; }



간략화

<input type="text" id="searchbox_for" onblur="if(this.value==''){this.value='프로젝트명을 입력해 주세요.'};" onfocus="if(this.value=='프로젝트명을 입력해 주세요.'){this.value=''};" value="프로젝트명을 입력해 주세요.">


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

스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
iframe 다루기  (0) 2011.11.16
이미지 슬라이드  (0) 2011.11.08
탭메뉴+prev, next  (0) 2011.08.08
특정영역 인쇄  (0) 2011.07.18
Posted by 수라
web standard/jquery2011. 11. 8. 14:51
<!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">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
        <meta name="author" content="caroufredsel.frebsite.nl" />

        <title>carouFredSel: an infinite, circular jQuery carousel</title>

        <script type="text/javascript" language="javascript" src="jquery.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.1.3.js"></script>
        <script type="text/javascript" language="javascript">
            $(function() {

                //    Scrolled by user interaction
                $('#foo2').carouFredSel({
                    scroll: 1, //하나씩 스크롤, 없을시 1페이지씩 스크롤
                    prev: '#prev2',
                    next: '#next2',
                    pagination: "#pager2",
                    auto: false
                });
            });
        </script>

        <style type="text/css" media="all">
            .list_carousel {
                background-color: #ccc;
                margin: 0 0 30px 60px;
                width: 360px;
            }
            .list_carousel ul {
                margin: 0;
                padding: 0;
                list-style: none;
                display: block;
            }
            .list_carousel li {
                font-size: 40px;
                color: #999;
                text-align: center;
                background-color: #eee;
                border: 5px solid #999;
                width: 50px;
                height: 50px;
                padding: 0;
                margin: 6px;
                display: block;
                float: left;
            }

            .clearfix {
                float: none;
                clear: both;
            }
            .prev {
                float: left;
                margin-left: 10px;
            }
            .next {
                float: right;
                margin-right: 10px;
            }
            .pager {
                float: left;
                width: 300px;
                text-align: center;
            }
            .pager a {
                margin: 0 5px;
                text-decoration: none;
            }
            .pager a.selected {
                text-decoration: underline;
            }
            .timer {
                background-color: #999;
                height: 6px;
                width: 0px;
            }
        </style>
    </head>
    <body>
        <div id="intro">
            <h1><a href="http://caroufredsel.frebsite.nl">carouFredSel</a></h1>
            <p>This is a demo page, for more examples, the complete documentation, tips &amp; tricks, a support-forum and even a configuration robot, visit <a href="http://caroufredsel.frebsite.nl">caroufredsel.frebsite.nl</a></p>
        </div>

        <div class="wrapper">
            <p>Carousel scrolled by user interaction.</p>
            <div class="list_carousel">
                <ul id="foo2">
                    <li>c</li>
                    <li>a</li>
                    <li>r</li>
                    <li>o</li>
                    <li>u</li>
                    <li>F</li>
                    <li>r</li>
                    <li>e</li>
                    <li>d</li>
                    <li>S</li>
                    <li>e</li>
                    <li>l</li>
                    <li> </li>
                </ul>
                <div class="clearfix"></div>
                <a id="prev2" class="prev" href="#">&lt;</a>
                <a id="next2" class="next" href="#">&gt;</a>
                <div id="pager2" class="pager"></div>
            </div>
        </div>
       
    </body>
</html>

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

iframe 다루기  (0) 2011.11.16
로그인 입력폼 description 제어  (0) 2011.11.09
탭메뉴+prev, next  (0) 2011.08.08
특정영역 인쇄  (0) 2011.07.18
레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
Posted by 수라
web standard/script2011. 8. 10. 14:17
원본글 : http://blog.outsider.ne.kr/129

자바스크립트가 강력해 지면서 DOM을 다루는 스크립트를 많이 사용하곤 한다. Ajax를 하면 특히 많이 사용하기도 하고 그 외에 편리한 UI를 위해서 동적(Dynamic)으로 자바스크립트를 이용해서 HTML의 내용을 바꾸거나 구조를 변환하거나 한다. 여기서 동적이라는 의미는 HTML문서를 작성할때 HTML코드를 입력한 것이 아니라 HTML페이지의 랜더링 후에 페이지를 사용하면서 스크립트를 이용해서 순간순간 바꾼다는 뜻이다.

이런 부분이 자바스크립트가 재밌는 점이기도 하면서 잘 활용하면 여러가지 편리한 인터페이스나 효과를 제공할 수 있다.

하지만 이렇게 동적으로 바꾸었다고 하더라도 브라우저에서 제공하는 "소스보기"를 하면 처음 작성한 HTML코드만 나올뿐 동적으로 생성한 코드를 볼 수가 없다. 동적으로 생성한 HTML이 내가 의도한 대로 잘 안나오면 간단한 것은 스크립트 부분을 보면서 해결할 수 있지만 소스가 복잡하다면 스크립트코드만 보면서 생성되는 HTML코드를 예상하는 것은 생각처럼 만만치 않을 때가 있지만 실제로 생성된 HTML코드를 볼 수 있다면 디버깅하는데 훨씬 편리할 수 있다.(왠만한 HTML Syntax에러는 에디터에 붙혀만 넣어놔도 발견할 수 있으니까....)

이게 불가능 한 줄로만 알고 있었는데 동적으로 생성한 코드를 볼 수 있는 방법이 있다.

document.documentElement.innerHTML

위 코드를 실행하면 현재 눈에 보이는 랜더링상태의 HTML코드를 볼 수 있다.

간단하게는

alert(document.documentElement.innerHTML);

를 통해서 볼 수 있지만 이렇게 할 경우 일단 줄바꿈이 제대로 되지 않으며 alert창에서는 복사를 할 수도 없고 또 긴코드는 alert창으로 다 볼 수도 없다. alert창에는 스크롤이 없으므로....(테스트 중인게 아니라면 대개의 경우 alert에서 보여줄 수 있는 야을 넘어갈 것이다.

그래서 동적으로 생성되는 코드를 볼 수 있도록 간단한 예제를 만들어 보았다.

document.documentElement.innerHTML 예제보기


document.documentElement.innerHTML에서 나온값은(head~/body 까지 나온다.) html코드이기 때문에 일반적인 방법으로 페이지에 찍어내도 다시 렌더링 되어버려서 소스코드를 볼 수가 없다.(결국 이것도 동적으로 생성한 것이니까...) 소스를 볼 수 있는 <xmp></xmp>코드를 이용해서 HTML코드가 찍히도록 할 수도 있는데 보통의 HTML페이지 소스에서는 스크립트 코드가 당연히 들어가 있을 것이기 때문에 </script>부분에서 결국 깨져버린다.

위의 예제에서는 textarea를 이용했다. textarea에 찍으면 html코드도 그대로 찍히니까 가장 간단한 방법일 것이다. 복사해서 에디터쪽에 붙히기만 하면 되니까....  예제를 약간 설명(?)하면 div를 하나두고 그안에 있는 change버튼을 누르면 div안의 내용을 스크립트를 이용해서 바꾸어 주었고 소스보기 버튼을 누르면 현재상태의 html코드가 textarea에 찍히는데 change버튼을 누르기 전에 소스보기를 눌러보고 바꾼 후에 눌러보면 쉽게 달라진 점을 비교할 수 있을 것이다.

귀찮아서 그렇게 까지는 안했지만 일반적으로 게시판에디터에서 하듯이 document.documentElement.innerHTML에서 나온 값의 태그가 동작하지 않도록 &lt; &gt;등으로 바꾸어줘서 찍어주는 방법도 있을 것이다.

머 보여주는 방법보다는 일단 본수 있다는게 중요한거니까.. ㅎㅎㅎ


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

OS & 버젼 체크  (0) 2015.04.24
url의 변수값을 스크립트로 가져오기  (0) 2011.11.21
오늘하루 창닫기 소스  (0) 2011.06.27
레이어팝업(오늘하루창닫기) 소스  (1) 2011.06.16
탭메뉴 스크립트  (0) 2011.01.06
Posted by 수라
web standard/jquery2011. 8. 8. 22:53
[SCRIPT]
<script type="text/javascript">
//탭메뉴
var num;
$(document).ready(function() {
    $("div.tabCont > div").hide().filter("div:first-child").show();
    //$("ul.tabMenu01 li:first-child").addClass("on");
    $("ul.tabMenu01 li").click(function() {
        num = $("ul.tabMenu01 li").index($(this));
        $("ul.tabMenu01 li.on").removeClass("on");
        $(this).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.paging li.prev").click(function() {
        num--;
        if (num < 0) {num = 0; };
        $("ul.tabMenu01 li.on").removeClass("on");
        $($("ul.tabMenu01 li")[num]).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.paging li.next").click(function() {
        num++;
        var max=($("ul.tabMenu01 li").size())-1;
        if(num > max) {num = max; };
        $("ul.tabMenu01 li.on").removeClass("on");
        $($("ul.tabMenu01 li")[num]).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.tabMenu01 li:first").trigger("click");
});
</script>

[HTML]
<ul class="tabMenu01 tabCeo clfix">
    <li class="tab01">Greeting</li>
    <li class="tab02">Profile</li>
    <li class="tab01">Greeting</li>
    <li class="tab02">Profile</li>
</ul>
<ul class="paging">
    <li class="prev">prev</li>
    <li class="next">next</li>
</ul>
<div class="tabCont">
    <div class="cont">
        1
    </div>
    <div class="cont">
        2
    </div>
    <div class="cont">
        3
    </div>
    <div class="cont">
        4
    </div>
</div>

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

로그인 입력폼 description 제어  (0) 2011.11.09
이미지 슬라이드  (0) 2011.11.08
특정영역 인쇄  (0) 2011.07.18
레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
탭메뉴  (1) 2011.06.16
Posted by 수라
web standard/jquery2011. 7. 18. 15:35
<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Print Portion Example</title>
<style type="text/css">
* {margin:0; padding:0; }
img {border:none;vertical-align:top;}
@media print {
    body div {display:none;}
    body .printable {display:block;}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div><img src="images/img_print110718_01.jpg" width="661" height="40" alt="" /></div>
<div id="printArea"><img src="images/img_print110718_02.jpg" width="661" height="320" alt="" /></div>
<div><img src="images/img_print110718_03.jpg" width="661" height="70" usemap="#link1" alt="" /></div>
<map id="link1" name="link1">
    <area shape="rect" href="#" onclick="divPrint();" coords="275,1,417,39" alt="" />
</map>
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses printArea.
$("#printArea").addClass("printable");
window.print();
}
</script>
</body>
</html>

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

이미지 슬라이드  (0) 2011.11.08
탭메뉴+prev, next  (0) 2011.08.08
레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
탭메뉴  (1) 2011.06.16
이미지롤오버  (0) 2011.04.06
Posted by 수라
web standard/jquery2011. 7. 15. 11:31

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

탭메뉴+prev, next  (0) 2011.08.08
특정영역 인쇄  (0) 2011.07.18
탭메뉴  (1) 2011.06.16
이미지롤오버  (0) 2011.04.06
가로&세로 슬라이드  (0) 2011.04.04
Posted by 수라
web standard/script2011. 6. 27. 16:25
[index]
<script language="JavaScript">
<!--
function setCookie( name, value, expiredays ){
    var todayDate = new Date();
    todayDate.setDate( todayDate.getDate() + expiredays );
    document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
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( "cookie01" ) != "done" ){ //cookie01는 쿠키의 이름
    noticeWindow = window.open('popup01.html','popup01','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=400,height=300,top=0,left=0');// 팝업창의 경로, 이름, 그외 스크롤바와 크기,위치 설정부분
    noticeWindow.opener = self;
}
// -->
</script>



[popup]
<script language="JavaScript">
<!--

function setCookie( name, value, expiredays ) {
    var todayDate = new Date();
    todayDate.setDate( todayDate.getDate() + expiredays );
    todayDate.setHours(0);
    todayDate.setMinutes(0);
    todayDate.setSeconds(0);
    document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function close_day() {
    //if ( document.forms[0].chkbox.checked ) //'오늘은이창을....'부분의 체크박스와 관련된 값입니다. chkbox는 chkbox의 name값
    setCookie( "cookie01", "done" , 1); // 쿠키값 체크
    self.close();
}

//3일동안열지않음
function close_3day() {
    setCookie( "cookie01", "done" , 3); // 쿠키값 체크
    self.close();
}

// 한달동안 열지 않음
function close_month() {
    setCookie( "cookie01", "done" , 30); // 쿠키값 체크
    self.close();
}

function close_window() {
    self.close();
}

// 새창띄우고 링크적용 후 팝업창닫기
function link_blank(url) {
    window.open(url);
    self.close();
}
// 부모페이지에 링크적용 후 팝업창닫기
function link_opener(url){
    opener.window.location.href=url;
    self.close();
}

// -->
</script>

[html1]
<ul>
    <li><a href="javascript:;" onclick="link_blank('http://test.com');">새창링크</a></li>
    <li><a href="javascript:;" onclick="link_opener('http://test.com');">부모창링크1</a></li>
</ul>
<a href="javascript:;" onclick="close_day();">하루동안 열지 않음</a>
<a href="javascript:;" onclick="close_3day();">3일동안 열지 않음</a>
<a href="javascript:;" onclick="close_month();">한달동안 열지 않음</a>
<a href="javascript:;" onclick="close_window();">닫기</a>

[html2]
<form name="popup">
    <ul>
        <li><a href="javascript:;" onclick="link_blank('http://test.com');">새창링크</a></li>
        <li><a href="javascript:;" onclick="link_opener('http://test.com');">부모창링크1</a></li>
    </ul>
    <input type="checkbox" name="chkbox" onclick="close_day()">오늘 하루 페이지를 열지 않습니다.
    <a href="javascript:;" onclick="close_window();">닫기</a>
</form>

[html3]
<form name="popup">
    <ul>
        <li><a href="javascript:;" onclick="link_blank('http://test.com');">새창링크</a></li>
        <li><a href="javascript:;" onclick="link_opener('http://test.com');">부모창링크1</a></li>
    </ul>
    <input type="checkbox" name="chkbox">오늘 하루 페이지를 열지 않습니다.
    <a href="javascript:;" onclick="close_window();">닫기</a>
</form>





Posted by 수라
web standard/jquery2011. 6. 16. 16:07

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
        $("ul.tab li").click(function() {
        var num = $("ul.tab li").index($(this));
        $("ul.tab li.on").removeClass("on");
        $(this).addClass("on");
        $("div.tabCont > div").hide();
        $($("div.tabCont div")[num]).show();
    });
    $("ul.tab li:first").trigger('click');
});
</script>

<ul class="tab">
     <li>tab01</li>
     <li>tab02</li>
     <li>tab03</li>
</ul>
<div class="tabCont">
     <div>cont 01</div>
     <div>cont 02</div>
     <div>cont 03</div>
</div>



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

특정영역 인쇄  (0) 2011.07.18
레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
이미지롤오버  (0) 2011.04.06
가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
Posted by 수라
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>
Posted by 수라