레이어 팝업

<script>

/************************** 080118 레이어 이동 소스 추가 _ 손지곤 ****************************************/
var TnTL_clickTime;
function DragResize_DN(it_Resize,evt,div_id){

    if(div_id){
        mv_act_objt=document.getElementById(div_id);
        if(mv_act_objt.style.position!='absolute'){
            mv_act_objt.style.left=TnT_get_objLeft(mv_act_objt);
            mv_act_objt.style.top=TnT_get_objTop(mv_act_objt);
            mv_act_objt.style.position='absolute';
        }
        mv_act_objt.style.zIndex=++iwinzidx;
    }
    else{mv_act_objt=iwindowLAYER;}

    DragResize_start=1;
    Drg_x=(this_browser=='n')? evt.pageX : event.clientX;
    Drg_y=(this_browser=='n')? evt.pageY : event.clientY;

    if(it_Resize<1){// Drag
        temp1=parseInt(mv_act_objt.style.left);
        temp2=parseInt(mv_act_objt.style.top);
        if(this_browser=='n')  document.onmousemove=TnTmoveAct_n;
        else document.onmousemove=TnTmoveAct;
    }
    else{// Resize
        iwindoWidth=parseInt(TntiwindowTable.width); // 가로
        iwindoHeight=parseInt(TntiwindowTable.height); // 세로
        if(this_browser=='n')  document.onmousemove=TnTresizeAct_n;
        else document.onmousemove=TnTresizeAct;
    }
    TnTL_clickTime=1;
}

function TnTmoveAct(){ // drag
    if(DragResize_start==1){
        mv_act_objt.style.left=temp1+event.clientX-Drg_x;
        mv_act_objt.style.top=temp2+event.clientY-Drg_y;
        return false;
    }
}

// resize move
function TnTresizeAct(){
    if(DragResize_start==1){
        var re_x=iwindoWidth+event.clientX-Drg_x;
        var re_y=iwindoHeight+event.clientY-Drg_y;
        if(re_x<50 || re_y<50) return false;
        iwindow_RESIZE(re_x,re_y);
        return false;
    }
}

// 부라우저 바탕화면 클릭시 레이어 자동으로 닫히게함(지워 버려도 됨) ----------------------
 document.onclick=iwindow_CLOSE_AUTO;
function iwindow_CLOSE_AUTO(){
 DragResize_start=0;
 if(TnTL_clickTime==1) return; // iwindow 를 드래그 ro 크기변경 동작후에는 자동닫기 적용안함(무조건 자동닫기 적용하려면 이 라인을 삭제)
 if(this_browser=='e'){
  if (event.srcElement.className=="TnT_Layer_dragin") return; // iwindow: Drag, Resize
  if (event.srcElement.className=="TnT_Top_button") return; // iwindow : TopButton
  if (event.srcElement.className=="TnT_Editor_button") return; // editor : Button
 }
 if((TnTL_clickTime+500)<(new Date()).getTime()){iwindow_CLOSE();}
}

function TnTmoveAct_n(evt){ // drag
    if (DragResize_start==1){
        mv_act_objt.style.left=temp1+evt.pageX-Drg_x;
        mv_act_objt.style.top=temp2+evt.pageY-Drg_y;
        return false;
    }
}

// resize move
function TnTresizeAct_n(evt){
    if (DragResize_start==1){
        var re_x=iwindoWidth+evt.pageX-Drg_x;
        var re_y=iwindoHeight+evt.pageY-Drg_y;
        if(re_x<50 || re_y<50) return false;
        iwindow_RESIZE(re_x,re_y);
        return false;
    }
}

// thisobj 의 Top
function TnT_get_objTop(thisobj){
    if (thisobj.offsetParent==document.body) return thisobj.offsetTop;
    else return thisobj.offsetTop + TnT_get_objTop(thisobj.offsetParent);
}

// thisobj 의 Left
function TnT_get_objLeft(thisobj){
    if (thisobj.offsetParent==document.body) return thisobj.offsetLeft;
    else return thisobj.offsetLeft + TnT_get_objLeft(thisobj.offsetParent);
}

// onload 기본모드
mouseDN_X=0;
mouseDN_Y=0;
if(navigator.userAgent.indexOf('MSIE') == -1){
 this_browser='n';
 document.onmousedown=function(n_evt){
  mouseDN_X=n_evt.pageX;
  mouseDN_Y=n_evt.pageY;
 }
 it_img_tag='input type=image '; // iwindow title
}
else{
 this_browser='e';
 it_img_tag='img ';
}
iwinzidx=10;
tntactiwin='';
/************************** //080118 레이어 이동 소스 추가 _ 손지곤 ****************************************/
</script>
                   
                   
                   <span style="position:relative;">
                   <div id="strm_hdd_layer" style="width:420px; position:absolute; top:19px; left:22px; display:'';">
                   
                    <table width="100%" cellpadding="0" cellspacing="0">
                     <tr height="29">
                      <td><img src="http://img.cafe24.com/images/hosting/popup/common/box_left_081.gif" align="absmiddle"></td>
                      <td width="100%" style="background:url(http://img.cafe24.com/images/hosting/popup/common/box_bg_081.gif) repeat-x; padding:5px 0 0 2px; color:#ffffff;" onmousedown="DragResize_DN(0,event,'strm_hdd_layer')">
                       <b>하드(HDD) 용량이란?</b>
                      </td>
                      <td style="background:url(http://img.cafe24.com/images/hosting/popup/common/box_bg_081.gif) repeat-x;">
                       <img src="http://img.cafe24.com/images/hosting/popup/common/x_081_off.gif" align="absmiddle" style="cursor:hand;" onmouseover="this.src='http://img.cafe24.com/images/hosting/popup/common/x_081_on.gif';" onmouseout="this.src='http://img.cafe24.com/images/hosting/popup/common/x_081_off.gif'" onclick="strm_hdd_layer.style.display='none';">
                      </td>
                      <td><img src="http://img.cafe24.com/images/hosting/popup/common/box_right_081.gif" align="absmiddle"></td>
                     </tr>
                    </table>

                    <table width="100%" cellpadding="0" cellspacing="0" style="border:1px #aaaaaa solid; border-top:none;" bgcolor="#f6f6f6" >
                     <tr>
                      <td style="padding:8px;">
                      <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
                       <tr>
                        <td><img src="http://img.cafe24.com/images/hosting/popup/common/box_left_top_081.gif" align="absmiddle"></td>
                        <td width="100%" style="background:url(http://img.cafe24.com/images/hosting/popup/common/box_line_081.gif) top repeat-x;"></td>
                        <td><img src="http://img.cafe24.com/images/hosting/popup/common/box_right_top_081.gif" align="absmiddle"></td>
                       </tr>
                       <tr>
                        <td style="background:url(http://img.cafe24.com/images/hosting/popup/common/box_line_081.gif) left repeat-y;"></td>
                        <td width="100%" style="color:#555555; line-height:1.4em;">
                        <!-- 실 내용 -->
                             하드 용량이란 FTP를 이용해 스트리밍CDN 서비스에 업로드가 가능한 자료의 용량입니다.<br><br>
                             용량이 모두 사용된 경우에는 추가옵션 및 사양 변경으로 증설이 가능하며, 신청은 [나의서비스관리]에서 하실 수 있습니다.
                        <!-- //실 내용 -->
                        </td>
                        <td style="background:url(http://img.cafe24.com/images/hosting/popup/common/box_line_081.gif) right repeat-y;"></td>
                       </tr>
                       <tr>
                        <td><img src="http://img.cafe24.com/images/hosting/popup/common/box_left_btm_081.gif" align="absmiddle"></td>
                        <td width="100%" style="background:url(http://img.cafe24.com/images/hosting/popup/common/box_line_081.gif) bottom repeat-x;"></td>
                        <td><img src="http://img.cafe24.com/images/hosting/popup/common/box_right_btm_081.gif" align="absmiddle"></td>
                       </tr>
                      </table>
                      </td>
                     </tr>
                    </table>
                   

                   </div>
                   </span>


http://www.cafe24.com/streaming/cdn_streaming_spec.php
이곳에서 사용된 소스코드임