질문/공유팁 게시판

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

팔공산
조회 수 2129 추천 수 1
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

XE 레이아웃에 Windows창 같이 움직이고 작아지고 커지고 화면조절 되는 팝업창 설치하는 방법입니다.

미리보기

 

popup.jpg

먼저 팝업창을 설치할 레이아웃의 layout.html안에 메인화면부분에 아래의 코드를 삽입합니다.

 

1. PopUp창 출력설정

<!-- PopUp창 -->

<block cond="!$layout_info->popup == ''"><include target="popup.html" /></block>

 

2. popup.html 내용

<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>

빨간색부분이 팝업창안의 내용이 들어가는 부분입니다.

지우시고 일반 내용을 넣어셔도 됩니다.

 

3. windows.css 내용

.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 }

 

4. js 파일들과 이미지들은 압축파일안에 모두 들어 있습니다.

 

5. 레이아웃설정은 info.xml 안에 추가해 주세요.

<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>

 

p.s 내가 할 수 있는 모든 방법을 동원해도 "24시간 동안 닫기"는 성공하지를 못하였네요ㅠㅠ

 

제가 넣은 24시간 닫기 소스인데 닫기기는 하는데 24시간이 작동을 안하네요.

팝업위젯에서는 잘 작동하는데 왜 안될까요?

고수님들의 한수 부탁드립니다.

 

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

 

Atachment
첨부
TAG •
위로 아래로
댓글 3
  • profile
    팔공산님은 아주예전에 중국심천에 계셨던것 같은데 아직도 중국에 계신가요? 너무 오랜만에 보니 반갑네요 예전엔 xe공홈에서 활동도 많이 하셨는데 ^_^
  • profile ?
    아직도 저를 기억하시는 분이 계시는군요^.^
    중국 주하이에 있었습니다. 그리고 지금은 한국에 있고요..
  • ?
    레이어 팝업창이 필요했는데 한번 적용해 보겠습니다. 감사합니다.