javascript - 이동 가능한 레이어팝업 소스

<style type="text/css">

#poplayer_No { position:absolute; font-family:굴림; font-size:12px; border:1px solid #000000;width:400; VISIBILITY: hidden;}

.notice { left:170; top:170; height:22; color:#ffffff; font-weight:bold; background-color:orange; padding:5; width:400; cursor:move;}

.contents { clear:both; width:320; height:280; padding:0}

.winClose { width:65; height:16; background-color:#ffffff; padding:5 5 0 5; font-weight:bold; cursor:pointer;}

</style>

<script language="javascript">

window.onload = function() {

    with(document) {

        getElementById("layer_move").onmousedown = function() { onMove_layer(1); }

        getElementById("htmlMove").onmousemove = getMove;

        getElementById("htmlMove").onmouseup = function() { onMove_layer(0); };    

        getElementById("notNote").onclick = function() { noticeClose('poplayer_No',1); };        

        getElementById("winClose").onclick = closeWin;

    }

}

//---------------------------------------------Layer Move---------------------------------------------------------//

var move_on, x_styleLeft, y_styleTop, x_accept, y_accept;

move_num = 0;

function onMove_layer(chk) {

    var val = document.getElementById("poplayer_No");

    if (chk ==1) {

        x_styleLeft = event.clientX - val.offsetLeft;

        y_styleTop = event.clientY - val.offsetTop;

    }

    move_num = chk;

}

function getMove() {

    var val = document.getElementById("poplayer_No")

    if (move_num == 1) {

        x_accept = event.clientX - x_styleLeft;

        y_accept = event.clientY - y_styleTop;

        if (x_accept > 1) { val.style.left = x_accept }

        if (y_accept > 1) { val.style.top = y_accept }

    }

}

//-------------------------------------------------PopCookies-----------------------------------------------------------------//

//팝업을 그만 띄운다.

function SetNoticeCookie(name, day) {

    var ExpDate = new Date();

    ExpDate.setDate(ExpDate.getDate() + day);

    document.cookie = name + "=" + escape("No") + "; path=; expires=" + ExpDate.toGMTString() + ";" 

}

//팝업창을 띄우기전 사용자의 쿠키를 체크

function getNoticeCookie(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>

<body id="htmlMove">

<div id="poplayer_No" name="poplayer_No">

    <div class="notice" id="layer_move">▒  이벤트 안내 ▒</div>

    <div class="contents">

<table id="Table_01" style="width: 00px;" border="0" cellspacing="0" cellpadding="0" align="center">

<tbody>

<tr>

<td>팝업 내용</td>

</tr>

</tbody>

</table>

</div>

    <div style="text-align:bottom">

        <div style="text-align:right">

            <input type="checkbox" id="notNote">오늘 하루 뛰우지 않음　<span class="winClose" id="winClose">[ 닫기 ]</span>

        </div>

    </div>

</div>

<script language="javascript">

function noticeShow(divid){

    var divObj = document.getElementById(divid);

    divObj.style.visibility = "visible";

}

function noticeHide(divid) {

    var divObj = document.getElementById(divid);

    divObj.style.visibility = "hidden";

}

function noticeClose(divid, closday)

{

    noticeHide(divid);

    SetNoticeCookie(divid, closday);

}

function closeWin() { 

document.getElementById('poplayer_No').style.visibility = "hidden";

} 

if (getNoticeCookie('poplayer_No') != "No") {

     noticeShow('poplayer_No'); 

}

</script>

</body>
이동 가능한 레이어팝업 소스

단축키

Articles
