레이어로 만든 팝업입니다. 쿠키, 이동. 띄우는 시간 조절 가능! 급할때 쓰라고요..^^ 정보
레이어로 만든 팝업입니다. 쿠키, 이동. 띄우는 시간 조절 가능! 급할때 쓰라고요..^^본문
급히 어디서 만들어 달라고 해서 오늘 만들어 봤습니다.
쿠키 설정, 드레그, 위치, 띄우는 시간, 등.. 사용 가능
그리고 DB와 스킨제작 하기 쉽게 처리 할 수 있도록 주석까지 달아 놨습니다. 이쁘게 스킨제작을 해도 될듯 해요!
별거 아니지만. 혹! 저처럼 일요일에 쉬지도 못하고 급하게 사용 하실 분이 계실것 같아
그누에 소스 올립니다. ^^
띄우는 날짜는 밑에 주석 보시면, 이벤트 기간을 설정 하실 수 있습니다.
그리고 공지창 보이는 초,분 까지 설정 할 수 있고요.
<script language="JavaScript">
<!--
var usePop = 1; // 1이면 popUP 사용
var useMonth = 10; // 공지창을 사용할 월 10은 10월임
var useDate = 9; // 공지창을 사용할 일 6은 6일까지임
var useTime = 10; // 공지창이 머무를 시간 10은 10초임
var expiredays = 1; //공지창 하루 안띄우기 시간. 1은 하루임
var layerTop = 10; //상단에서 떨어진 위치를 잡으세요
var layerLeft = 10; //죄측에서 떨어진 위치를 잡으세요
var layerWidth = 260; //레이어 넓이
var layerHeight = 260; //레이어 높이
var layerTopBg = "#666666"; //상단,하단 바 배경
var layerPopBg = "#FFFFFF"; //내용 부분 배경
function startTime()
{
var cName ="divPop";
var time = new Date();
var year = time.getFullYear();
usedTime = new Date(year,parseInt(useMonth)-1,parseInt(useDate)+1);
endTime = (usedTime.getTime()-time.getTime())/(24*60*60*1000);
showTime = Math.ceil(endTime);
if ( showTime < 0 || usePop != 1)
{
document.getElementById('divPop').style.visibility = "hidden";
}
else
{
cookieIndex = getCookie(cName);
if ( !cookieIndex )
{
document.getElementById('divPop').style.visibility = "visible";
}
else
{
document.getElementById('divPop').style.visibility = "hidden";
}
}
document.getElementById('divPop').style.top = layerTop+"px";
document.getElementById('divPop').style.left = layerLeft+"px";
document.getElementById('divPop').style.width = layerWidth+"px";
document.getElementById('popMain').style.height = layerHeight+"px";
document.getElementById('popTop').style.background = layerTopBg;
document.getElementById('divPop').style.background = layerPopBg;
document.getElementById('popBottom').style.background = layerTopBg;
h= time.getHours();
m = time.getMinutes();
s = time.getSeconds();
closeTime = h*3600+m*60+s;
closeTime += parseInt(useTime);
setTimer();
}
function setTimer()
{
var time = new Date();
hour = time.getHours();
min = time.getMinutes();
sec = time.getSeconds();
curTime = hour*3600+min*60+sec;
if ( curTime >= closeTime )
{
document.getElementById('divPop').style.visibility = "hidden";
}
else
{
window.setTimeout("setTimer()",1000);
}
}
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function closeLayer()
{
if ( document.notice_form.chkbox.checked )
{
setCookie("divPop", "os" , expiredays);
}
document.getElementById('divPop').style.visibility = "hidden";
}
isIE = document.all;
isNN = !document.all && document.getElementById;
isN4 = document.layers;
var max_zindex = 30;
function drag( mode,e,obj )
{
if ( mode == 'start' )
{
obj.offsetx = isIE ? event.clientX : e.clientX;
obj.offsety = isIE ? event.clientY : e.clientY;
obj.nowX = parseInt(obj.style.left);
obj.nowY = parseInt(obj.style.top);
obj.dragable = '1';
var new_zindex = max_zindex + 1;
obj.style.zIndex = new_zindex;
max_zindex = new_zindex;
}
else if ( mode == 'move' )
{
if ( obj.dragable == '1' )
{
var x = isIE ? (obj.nowX + event.clientX - obj.offsetx) : (obj.nowX + e.clientX - obj.offsetx);
var y = isIE ? (obj.nowY + event.clientY - obj.offsety) : (obj.nowY + e.clientY - obj.offsety);
var max_winw = document.body.clientWidth - parseInt(obj.style.width);
var max_winh = document.body.clientHeight - parseInt(obj.style.height);
if ( x >= 0 && x <=max_winw ) obj.style.left = x;
if ( y >= 0 && y <=max_winh ) obj.style.top = y;
}
}
else if ( mode == 'stop' )
{
obj.dragable='0'
}
}
//-->
</script>
</head>
<STYLE type="text/css">
#divPop { position:absolute; border:2px #999999 solid; z-index:999; visibility:visible;
cursor:move; filter:alpha(Opacity:80,style:0));-moz-opacity:.50;opacity:.50;
}
#divPop #popTop { height: 30px; }
#divPop #popMain { height:270px; }
#divPop #popBottom { height: 40px; }
.topContent { position:relative; top:5px; margin:0 0 0 5px; font-weight:bold; font-size:12px; color:#ffffff; }
.mainContent { margin:5px 0 0 5px; font-weight:normal; font-size:12px; color:#666666; }
.bottomContent { position:relative; top:5px; margin:0 0 2px 0; font-weight:bold; font-size:12px; color:#ffffff; cursor:pointer; text-align:center }
</STYLE>
<body onLoad="startTime();">
<form name="notice_form">
<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'>
<div id="popTop">
<div class="topContent">공지 <span id="today" style="font-weight:normal; color:#ff8000"></span></div>
</div>
<div id="popMain">
<div class="mainContent">
<p>서원영 개인전</p>
<p>Memorandum of an Interstellar Surveyor </p>
<p> (어느 성간측량기사의 비망록) </p>
<p> </p>
<p> 장 소: 모란갤러리 종로구 관훈동 백상빌딩 B1<br>
*** 개인정보보호를 위한 전화번호 노출방지 ***
</p>
<p>기 간: 2007. 10. 17(Wed)-10. 23(Tue) </p>
<p>초대일시: 2007. 10. 17(Wed) pm 6:0</p>
</div>
</div>
<div id="popBottom">
<div class="bottomContent"> <span style="font-weight:normal">이 창은</span><span id="stayTime" style="color:#ff8000"></span>초후에
자동으로 닫힙니다.</span><br>
<input type="checkbox" name="chkbox" onclick="closeLayer();">
오늘 하루 이 창을 열지 않음<a href="javascript:closeLayer();"> [닫기]</a> </div>
</div>
</div>
</form>
<script language="Javascript">
function getCookie( name )
{
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie )
{
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
function cal()
{
var t = new Date();
var y = t.getFullYear();
var m = t.getMonth();
var d = t.getDate();
var dw = t.getDay();
var w;
switch ( dw )
{
case 0: w = " (日요일)"; break;
case 1: w = " (月요일)"; break;
case 2: w = " (火요일)"; break;
case 3: w = " (水요일)"; break;
case 4: w = " (木요일)"; break;
case 5: w = " (金요일)"; break;
case 6: w = " (土요일)"; break;
}
document.getElementById('today').innerHTML = ""+y+ "년 " + (m+1) + "월 " + d + "일"+w;
}
cal();
document.getElementById('stayTime').innerHTML = useTime;
</script>
8
댓글 12개
복 받으실꺼에요~!
