Top

[HTML] 레이어로 만든 팝업입니다. 쿠키, 이동. 띄우는 시간 조절 가능! | Web-Programing
김경훈 (admin) | Editor | 2013/03/19 16:58:42 | 조회:4779

  1. <script language="JavaScript">
  3. <!--
  4. var usePop = 1;        // 1이면 popUP 사용
  5. var useMonth = 10;     // 공지창을 사용할 월 10은 10월임
  6. var useDate  = 9;      // 공지창을 사용할 일 6은  6일까지임
  7. var useTime  = 10;     // 공지창이 머무를 시간 10은 10초임
  8. var expiredays = 1;    //공지창 하루 안띄우기 시간. 1은 하루임
  9. var layerTop  = 10;    //상단에서 떨어진 위치를 잡으세요
  10. var layerLeft = 10;    //죄측에서 떨어진 위치를 잡으세요
  11. var layerWidth = 260;  //레이어 넓이
  12. var layerHeight = 260; //레이어 높이
  13. var layerTopBg = "#666666"; //상단,하단 바 배경
  14. var layerPopBg = "#FFFFFF"; //내용 부분 배경
  15. function startTime()
  16. {
  17.     var cName ="divPop";
  18.     var time = new Date();
  19.     var year = time.getFullYear();
  20.     usedTime = new Date(year,parseInt(useMonth)-1,parseInt(useDate)+1);
  21.     endTime = (usedTime.getTime()-time.getTime())/(24*60*60*1000);
  22.     showTime = Math.ceil(endTime);
  23.     if ( showTime < 0 || usePop != 1)
  24.  {
  25.         document.getElementById('divPop').style.visibility = "hidden";
  26.  }
  27.  else
  28.  {
  29.      cookieIndex = getCookie(cName);
  30.         if ( !cookieIndex )
  31.         {      
  32.             document.getElementById('divPop').style.visibility = "visible";
  33.         }
  34.         else
  35.         {
  36.             document.getElementById('divPop').style.visibility = "hidden";
  37.         }
  38.  }
  39.     document.getElementById('divPop').style.top = layerTop+"px";
  40.     document.getElementById('divPop').style.left = layerLeft+"px";
  41.     document.getElementById('divPop').style.width = layerWidth+"px";
  42.     document.getElementById('popMain').style.height = layerHeight+"px";
  43.     document.getElementById('popTop').style.background = layerTopBg;
  44.     document.getElementById('divPop').style.background = layerPopBg;
  45.     document.getElementById('popBottom').style.background = layerTopBg;
  46.     h= time.getHours();
  47.     m = time.getMinutes();
  48.     s = time.getSeconds();
  49.     closeTime = h*3600+m*60+s;
  50.     closeTime += parseInt(useTime);
  51.     setTimer();
  52. }
  53. function setTimer()
  54. {
  55.     var time = new Date();
  56.  hour = time.getHours();
  57.     min = time.getMinutes();
  58.     sec = time.getSeconds();
  59.     curTime = hour*3600+min*60+sec;
  60.     if ( curTime >= closeTime )
  61.  {
  62.         document.getElementById('divPop').style.visibility = "hidden";
  63.     }
  64.  else
  65.  {
  66.         window.setTimeout("setTimer()",1000);
  67.  }
  68. }
  69. function setCookie( name, value, expiredays )
  70. { 
  71.     var todayDate = new Date(); 
  72.     todayDate.setDate(todayDate.getDate() + expiredays); 
  73.     document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";" 
  74. }
  75. function closeLayer()
  76. {
  77.     if ( document.notice_form.chkbox.checked )
  78.  {
  79.         setCookie("divPop", "os" , expiredays); 
  80.     }
  81.     document.getElementById('divPop').style.visibility = "hidden";
  82. }
  83. isIE  = document.all;
  84. isNN  = !document.all && document.getElementById;
  85. isN4  = document.layers;
  86. var max_zindex = 30;
  87. function drag( mode,e,obj )
  88. { 
  89.     if ( mode == 'start' )
  90.  {
  91.         obj.offsetx = isIE ? event.clientX : e.clientX;
  92.         obj.offsety = isIE ? event.clientY : e.clientY;
  93.         obj.nowX    = parseInt(obj.style.left);
  94.         obj.nowY    = parseInt(obj.style.top);
  95.         obj.dragable = '1';
  96.         var new_zindex = max_zindex + 1;
  97.         obj.style.zIndex = new_zindex;
  98.         max_zindex = new_zindex;
  99.     }
  100.  else if ( mode == 'move' )
  101.  { 
  102.          if ( obj.dragable == '1' )
  103.    {
  104.              var x = isIE ? (obj.nowX + event.clientX - obj.offsetx) : (obj.nowX + e.clientX - obj.offsetx);
  105.              var y = isIE ? (obj.nowY + event.clientY - obj.offsety) : (obj.nowY + e.clientY - obj.offsety);
  106.              var max_winw = document.body.clientWidth - parseInt(obj.style.width);
  107.              var max_winh = document.body.clientHeight - parseInt(obj.style.height);
  108.              if ( x >= 0 && x <=max_winw ) obj.style.left = x;
  109.              if ( y >= 0 && y <=max_winh ) obj.style.top  = y;
  110.          }
  111.     }
  112.  else if ( mode == 'stop' )
  113.  {
  114.         obj.dragable='0'
  115.     }
  116. }
  117. //-->
  118. </script>
  119. </head>
  120. <STYLE type="text/css">
  121. #divPop { position:absolute; border:2px #999999 solid; z-index:999; visibility:visible;
  122.     cursor:move; filter:alpha(Opacity:80,style:0));-moz-opacity:.50;opacity:.50;
  123. }
  124. #divPop #popTop { height: 30px; }
  125. #divPop #popMain { height:270px; }
  126. #divPop #popBottom { height: 40px; }
  127. .topContent { position:relative; top:5px; margin:0 0 0 5px; font-weight:bold; font-size:12px; color:#ffffff; }
  128. .mainContent { margin:5px 0 0 5px; font-weight:normal; font-size:12px; color:#666666; }
  129. .bottomContent { position:relative; top:5px; margin:0 0 2px 0; font-weight:bold; font-size:12px; color:#ffffff; cursor:pointer; text-align:center }
  130. </STYLE>
  131. <body onLoad="startTime();">
  132. <form name="notice_form">
  133. <div id="divPop" style="position:absolute;left:0px;top:0px;z-index:1;width:0px;height:0px;" onSelectStart="return false;" onMouseDown="drag('start',event,this);" onMouseUp="drag('stop',event,this);" onMouseMove="drag('move',event,this);" dragable='0'>
  134.     <div id="popTop">
  135.         <div class="topContent">공지 <span id="today" style="font-weight:normal; color:#ff8000"></span></div>
  136.  </div>
  137.     <div id="popMain">
  138.         <div class="mainContent">
  139.         <p>서원영 개인전</p>
  140.         <p>Memorandum of an Interstellar Surveyor </p>
  141.         <p> (어느 성간측량기사의 비망록) </p>
  142.         <p> </p>
  143.         <p> 장 소: 모란갤러리 종로구 관훈동 백상빌딩 B1<br>
  144.                       *** 개인정보보호를 위한 전화번호 노출방지 *** 
  145.         </p>
  146.         <p>기 간: 2007. 10. 17(Wed)-10. 23(Tue) </p>
  147.         <p>초대일시: 2007. 10. 17(Wed) pm 6:0</p>
  148.       </div>
  149.  </div>
  150.     <div id="popBottom">
  151.         <div class="bottomContent"> <span style="font-weight:normal">이 창은</span><span id="stayTime" style="color:#ff8000"></span>초후에 
  152.         자동으로 닫힙니다.</span><br>
  153.         <input type="checkbox" name="chkbox" onclick="closeLayer();">
  154.         오늘 하루 이 창을 열지 않음<a href="javascript:closeLayer();"> [닫기]</a> </div>
  155.  </div>
  156. </div>
  157. </form>
  158. <script language="Javascript">
  159. function getCookie( name ) 
  160. { 
  161.     var nameOfCookie = name + "="; 
  162.     var x = 0; 
  163.     while ( x <= document.cookie.length ) 
  164.     { 
  165.         var y = (x+nameOfCookie.length); 
  166.         if ( document.cookie.substring( x, y ) == nameOfCookie )
  167.   { 
  168.             if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 ) 
  169.             endOfCookie = document.cookie.length; 
  170.             return unescape( document.cookie.substring( y, endOfCookie ) ); 
  171.         }
  172.         x = document.cookie.indexOf( " ", x ) + 1; 
  173.         if ( x == 0 ) 
  174.         break; 
  175.      } 
  176.      return ""; 
  177. }
  178. function cal()
  179. {
  180.     var t  = new Date();
  181.     var y  = t.getFullYear();
  182.     var m  = t.getMonth(); 
  183.     var d  = t.getDate();
  184.     var dw  = t.getDay();   
  185.     var w;
  186.  switch ( dw )
  187.  {
  188.      case 0: w = " (日요일)"; break; 
  189.      case 1: w = " (月요일)"; break; 
  190.      case 2: w = " (火요일)"; break; 
  191.      case 3: w = " (水요일)"; break; 
  192.      case 4: w = " (木요일)"; break; 
  193.      case 5: w = " (金요일)"; break; 
  194.      case 6: w = " (土요일)"; break; 
  195.     }
  196.     document.getElementById('today').innerHTML = ""+y+ "년 " + (m+1) + "월 " + d + "일"+w;
  197. }
  198. cal();
  199. document.getElementById('stayTime').innerHTML = useTime;
  200. </script>
공유하기
공유하기
0
0
0


댓글을 불러오는 중입니다.
▲ 이전글 [Javascript] UTF-8 -> EUC-KR 페이지로 PARAM 전송 진기원 (jjinki) 2013-03-20 16:59:53
▼ 다음글 [MSSQL] ORACLE, MSSQL 함수 비교 김경훈 (admin) 2013-03-18 09:09:22
페이지 로딩이 끝나면 해당 댓글로 이동 합니다.