레이아웃에 떠다니는 팝업창 띄우기

<load target="./js/prototype.js" />

<load target="./js/scriptaculous.js" />

<load target="./js/effects.js" />

<load target="./js/dragdrop.js" />

<load target="./js/windows.js" />

<load target="windows.css" />

 

<script type="text/javascript">
function proc($args) {
    // 기간 닫기
    if($_COOKIE['window_A_Close'] == 'n') return;
}

function set_testCookie() {
    var expire = new Date();
    expire.setDate(expire.getDate()+ 1); 
    xSetCookie('window_A_Close', 'n', expire);
    xHide('window_A');
}
</script>

 

<div id="window_A" class="window_container" style="opacity:0.0;visibility:hidden;position:absolute;">

 

<div id="window_A_resize_handle" class="window_resize_handle"></div>

 

<div id="window_A_topslice" class="window_topslice" >

<div id="window_A_drag_handle" class="window_dragger"></div>

<img style="z-index:100;margin-left:10px;margin-top:4px;position:absolute;" name="button_dirty_window_A" src="/images/but_clea.gif" />

 

<div class="window_button_holder" style="z-index:100;position:absolute;">

<a href="#" onClick="mywindow.minimize();"><img border="0" src="/images/but_mini.gif" /></a>

<a href="#" onClick="mywindow.maximize();"><img border="0" src="/images/but_maxi.gif" /></a>

<a href="#" onClick="mywindow.close();"><img border="0" src="/images/but_clos.gif" /></a>

</div>

 

<div class="window_handle_left"></div>

<div class="window_handle_center"><span class="window_title">{$layout_info->popup_title}</span></div>

<div class="window_handle_right"></div>

</div>

 

<div id="window_A_middleslice" class="window_middleslice">

 

<div class="window_border_left" >

<div style="height:40px;width:15px;position:absolute;bottom:0px;">

<img src="/images/window_8.gif" />

</div>

<img src="/images/window_9.gif" />

</div>

 

<div class="window_content" id="window_A_content">

<div style="padding:5px;">

<div class="debug_field" id="command_div"></div>

<span cond="$layout_info->popup_text">{$layout_info->popup_text}</span>

<span cond="$layout_info->popup_image"><a href="{$layout_info->popup_image_url}" target="_{$layout_info->popup_image_target}"><img src="{$layout_info->popup_image}" width="350" /></a></span>

</div>

</div>

 

<div class="window_border_right" >

<div style="height:40px;width:15px;position:absolute;bottom:0px;">

<img src="/images/window_A.gif" />

</div>

<img src="/images/window_B.gif" />

</div>

</div>

 

<div id="window_A_bottomslice" class="window_bottomslice">

<div class="window_bottom_left"></div>

<div class="window_bottom_center"></div>

<div class="window_bottom_right"></div>

</div>

 

<div class="bottom" style="position:relative; padding:5px 5px 5px 0; text-align:right; overflow:hidden;">
<a href="javascript:void(set_testCookie())" ><img src="/images/24close.gif" title="24시간 닫기" /></a>
</div>

 

</div>

 

<block cond="!$layout_info->popup_width">{@ $layout_info->popup_width = '400'}</block>

<block cond="!$layout_info->popup_height">{@ $layout_info->popup_height = '400'}</block>

<block cond="!$layout_info->popup_posx">{@ $layout_info->popup_posx = '300'}</block>

<block cond="!$layout_info->popup_posy">{@ $layout_info->popup_posy = '150'}</block>

 

<script type="text/javascript">

var mywindow;

var anotherwindow;

window.onload=function() {

  mywindow=new Window(

    {

    "name":"TestWindow",

    "z_index":1000,

    "min_height":10,

    "action":"debug",

    "id":"window_A",

    "scrollbars":1,

    "is_minimized":0,

    "stayontop":0,

    "min_width":10,

    "height":{$layout_info->popup_height},

    "posx":{$layout_info->popup_posx},

    "posy":{$layout_info->popup_posy},

    "width":{$layout_info->popup_width}});

 </script>

.window_dragger a { text-decoration:none; font-weight:bold; font-size:10px; }

.window_dragger { cursor:move; z-index:1; width:100%; height:36px; position:absolute; top:0px; left:0px; }

 

.window_resize_handle { position:absolute; cursor:se-resize; width:20px; height:16px; font-size:10px; z-index:1; } .window_container { padding:0px; position:absolute; } 

.window_fader { border:0px; width:100%; } 

.window_topslice { position:relative; border:0px; width:100%; height:36px; } 

.window_middleslice { width:100%; position:relative; } 

.window_bottomslice { position:absolute; height:16px; border:0px; width:100%; }

.window_handle_left { font-size:3px; position: absolute; left:0px; top:0px; width:15px; height:36px; background:url(./images/window_0.gif); } 

.window_title { line-height:30px; font-size:14px; font-weight:bold; font-family:sans-serif; overflow:hidden; } .window_handle_center { font-size:3px; background:url(./images/window_1.gif); background-repeat:repeat-x; top:0px; height:36px; border:0px; margin-left: 15px; margin-right:74px; text-align:center; } 

.window_handle_right { background:url(./images/window_2.gif); font-size:3px; position: absolute; right:0px; top:0px; width:74px; height:36px; border:0px; }

 

 

.window_border_left { background:url(./images/window_3.gif); background-repeat:repeat-y; position: absolute; left:0px; width:15px; border:0px; } 

.window_content { text-align:left; /*overflow:auto;*/ position:relative; background:#D7D0BE; font-family:sans-serif; font-size:14px; border:0px; margin-left: 15px; margin-right:16px; padding:0px; } 

.window_border_right { background:url(./images/window_4.gif); background-repeat:repeat-y; position: absolute; right:0px; top:0px; width:16px; border:0px; }

.window_bottom_left { font-size:3px; position: absolute; left:0px; bottom:0px; width:15px; height:16px; background:url(./images/window_5.gif); border:0px; } 

.window_bottom_center { font-size:3px; background:url(./images/window_6.gif); background-repeat:repeat-x; margin-bottom:0px; height:16px; border:0px; margin-left: 15px; margin-right:16px; } 

.window_bottom_right { background:url(./images/window_7.gif);font-size:3px; position: absolute; right:0px; bottom:0px; width:16px; height:16px; border:0px; } 

.window_button_holder { position:absolute; right:19px; text-align:right; width:60px; padding-top:8px; font-size:6px }

<group>

<title xml:lang="ko">팝업창 설정</title>

<title xml:lang="en">PopUp Info</title>

<var name="popup" type="select">

<title xml:lang="ko">PopUp 출력</title>

<title xml:lang="en">PopUp User</title>

<description xml:lang="ko">팝업출력</description>

<description xml:lang="en">PopUp User</description>

<options value="">

<title xml:lang="ko">출력안함</title>

<title xml:lang="en">None</title>

</options>

<options value="Y">

<title xml:lang="ko">출력</title>

<title xml:lang="en">User</title>

</options>

</var>

<var name="popup_title" type="text">

<title xml:lang="ko">　┖  PopUp창 제목</title>

<title xml:lang="en">　┖  PopUp Title</title>

<description xml:lang="ko">PopUp창의 제목</description>

<description xml:lang="en">PopUp Title</description>

</var>

<var name="popup_text" type="textarea">

<title xml:lang="ko">　┖  PopUp내용</title>

<title xml:lang="en">　┖  PopUp Text</title>

<description xml:lang="ko">PopUp안에 들어갈 내용을 등록합니다.(Html사용 가능)</description>

<description xml:lang="en">PopUp Text(Html use)</description>

</var>

<var name="popup_image" type="image">

<title xml:lang="ko">　┖  PopUp내용 이미지</title>

<description xml:lang="ko">PopUp창 내용안에 들어갈 이미지를 등록</description>

</var>

<var name="popup_image_url" type="text">

<title xml:lang="ko">　┖  PopUp 이미지 링크</title>

<title xml:lang="en">　┖  PopUp Image Url</title>

<description xml:lang="ko">PopUp 이미지 클릭시 이동할 링크 URL을 입력해 주세요.</description>

<description xml:lang="en">PopUp Image Url</description>

</var>

<var name="popup_image_target" type="select">

<title xml:lang="ko">　┖  PopUp 이미지 Target</title>

<title xml:lang="en">　┖  PopUp Image Target</title>

<description xml:lang="ko">PopUp 이미지 클릭시 창의 선택</description>

<description xml:lang="en">PopUp Image Target</description>

<options value="blank">

<title xml:lang="ko">새창</title>

<title xml:lang="en">New Window</title>

</options>

<options value="parent">

<title xml:lang="ko">현재창</title>

<title xml:lang="en">Current Window</title>

</options>

</var>

<var name="popup_width" type="text">

<title xml:lang="ko">　┖  PopUp창 가로넓이</title>

<title xml:lang="en">　┖  PopUp Width</title>

<description xml:lang="ko">PopUp창의 넓이(기본 400)</description>

<description xml:lang="en">PopUp Width</description>

</var>

<var name="popup_height" type="text">

<title xml:lang="ko">　┖  PopUp창 세로높이</title>

<title xml:lang="en">　┖  PopUp Height</title>

<description xml:lang="ko">PopUp창의 높이(기본 400)</description>

<description xml:lang="en">PopUp Height</description>

</var>

<var name="popup_posx" type="text">

<title xml:lang="ko">　┖  PopUp창 가로위치</title>

<title xml:lang="en">　┖  PopUp X</title>

<description xml:lang="ko">PopUp창의 가로위치(기본 300)</description>

<description xml:lang="en">PopUp X</description>

</var>

<var name="popup_posy" type="text">

<title xml:lang="ko">　┖  PopUp창 세로위치</title>

<title xml:lang="en">　┖  PopUp Y</title>

<description xml:lang="ko">PopUp창의 세로위치(기본 150)</description>

<description xml:lang="en">PopUp Y</description>

</var>

</group>