홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

[자바스크립트] 움직이는 팝업 레이어

세상이야기.      조회 수 1788 추천 수 0 2011.05.10 10:01:12


<HTML>
<BODY>
 
<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 is_setCookie( name, value, expirehours ) {
  var todayDate = new Date();
  todayDate.setHours( todayDate.getHours() + expirehours );
  document.cookie = name + "=" + escape( value ) + "; expires=" + todayDate.toGMTString() + "; path=/; domain=handnbook.co.kr";
 }

 function is_dayCloseWin(win, name) {
  if ( document.getElementById(win).checked ){
   is_setCookie(name, "done" , 24 );
  }
  document.getElementById(name).style.display = "none";
 }

 function is_closeWin(name) {
  document.getElementById(name).style.display = "none";
 }

 //-------------------------------------------------------------------
 // 레이어 드레그 이동 부분
 //-------------------------------------------------------------------
 var popup1_down = 0;
 var popup2_down = 0;
 var mouseX = 0;
 var mouseY = 0;

 function popupMouseMove(popupName)
 {
  var x, y;
  x = window.event.clientX - mouseX;
  y = window.event.clientY - mouseY;

  document.getElementById('MouseX').value = x;
  document.getElementById('MouseY').value = y;
 
  var layerObj;
  if (popup1_down || popup2_down) {
  
   layerObj = document.getElementById(popupName);
   layerObj.style.pixelLeft += x;
   layerObj.style.pixelTop += y;
   mouseX = window.event.clientX;
   mouseY = window.event.clientY;
  }
 }

 function popupMouseClick(popupName)
 {
  document.getElementById('MouseDown').value = "Click";
  if (popupName == 'a_popup') {
   popup1_down = 1;
   // 레이어 z-index를 바꿔 클릭한 레이어가 먼저 보이도록 함
   document.getElementById('a_popup').style.zIndex = "2";
   document.getElementById('b_popup').style.zIndex = "1";

  }
  if (popupName == 'b_popup') {
   popup2_down = 1;
   document.getElementById('b_popup').style.zIndex = "2";
   document.getElementById('a_popup').style.zIndex = "1";
  }
 
  mouseX = window.event.clientX;
  mouseY = window.event.clientY;
 }

 function popupMouseUp(popupName)
 {
  document.getElementById('MouseDown').value = "None";

  if (popupName == 'a_popup') popup1_down = 0;
  if (popupName == 'b_popup') popup2_down = 0;
 }

 function popupMouseOut(popupName)
 {
  popup1_down = 0;
  popup2_down = 0;
 }
-->
</script>


<div id="a_popup" style="position:absolute; left:100px; top:230px;  width:300; height:400;" onMouseMove="popupMouseMove('a_popup')" onMouseDown="popupMouseClick('a_popup')" onMouseUp="popupMouseUp('a_popup')" onMouseOut="popupMouseOut('a_popup')">

 <table width="300" style="background-image: url(http://www.webmadang.net/javascript/img/pop01.gif); font-size:9pt;">
  <tr>
   <td height="370">&nbsp;</td>
  </tr>
  <tr>
   <td style="color:black;">&nbsp;오늘은 더이상 열지 않겠습니다.<input type="checkbox" name="popup_todayClose1" onClick="javascript:is_dayCloseWin('popup_todayClose1','a_popup');"></td>
   <td style="color:white;text-align:right;"><INPUT TYPE="button" VALUE="닫기" ONCLICK="javascript:is_closeWin('a_popup');" style="background-color:white; border:solid 1px black; font-size:9pt;">&nbsp;&nbsp;</td>
  </tr>
 </table>
</div>

<div id="b_popup" style="position:absolute; left:250px; top:250px; width:300; height:400;" onMouseMove="popupMouseMove('b_popup')" onMouseDown="popupMouseClick('b_popup')" onMouseUp="popupMouseUp('b_popup')" onMouseOut="popupMouseOut('b_popup')">

 <table width="300" style="background-image: url(http://이 부분을 원하는 이미지 경로를 입력합니다.); font-size:9pt;">
  <tr>
   <td height="370">&nbsp;</td>
  </tr>
  <tr>
   <td style="color:black;">&nbsp;&nbsp;&nbsp;오늘은 더이상 열지 않겠습니다.<input type="checkbox" name="popup_todayClose2" onClick="javascript:is_dayCloseWin('popup_todayClose2','b_popup');"></td>
   <td style="color:white;text-align:right;"><INPUT TYPE="button" VALUE="닫기" ONCLICK="javascript:is_closeWin('b_popup');" style="background-color:white; border:solid 1px black; font-size:9pt;">&nbsp;&nbsp;</td>
  </tr>
 </table>
</div>

<script language="JavaScript">
<!--
 // 쿠기랄 가져와 오늘 레이어를 띄울지 말지 결정
 cookiedata = document.cookie;   
 if ( cookiedata.indexOf("a_popup=done") < 0 )
  document.getElementById('a_popup').style.display = "block";
 else document.getElementById('a_popup').style.display = "none";

 if ( cookiedata.indexOf("b_popup=done") < 0 )
  document.getElementById('b_popup').style.display = "block";
 else document.getElementById('b_popup').style.display = "none";
-->
</script>

<input type="text" id="MouseX" size="10"><input type="text" id="MouseY" size="10"><input type="text" id="MouseDown" size="10">

</BODY>
</HTML>

출처: webmadang.net


List of Articles
번호 제목 글쓴이 날짜 조회 수
32 페이지 상단 이동 버턴 만들기 세상이야기 2018-12-23 83
31 CSS 배경 이미지 속성 세상이야기 2017-12-24 81
30 HTML5 비디오 / 오디오 삽입 테그 세상이야기 2017-12-19 110
29 [자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴 file 세상이야기. 2011-05-10 1627
28 [자바스크립트] 세로형 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3304
27 [자바스크립트] 세로 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 2973
26 [자바스크립트] 가로형 메뉴 만들기 소스 세상이야기. 2011-05-10 1909
» [자바스크립트] 움직이는 팝업 레이어 세상이야기. 2011-05-10 1788
24 [자바스크립트] 화면 우측하단에 고정버턴 만들기 세상이야기. 2011-05-10 1686
23 제로보드 게시글 열람글 아래 목록 안나오게 하는 방법 세상이야기 2011-01-20 2457
XE Login