레이어(Layer) 팝업 만들기
// 팝업 레이어 등록
작성자 : 단국강토
등록날짜 : 2009.02.19 10:42
필요한 이미지는 첨부 했습니다..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Layer 팝업 만들기 </title>
<script type="text/javascript" language="javascript">
var objLayer;
var da= document.all;
var pa= new Array();
var Cookies = {};
<head>
<title> Layer 팝업 만들기 </title>
<script type="text/javascript" language="javascript">
var objLayer;
var da= document.all;
var pa= new Array();
var Cookies = {};
// 팝업 레이어 등록
pa[0] = da.popup0.style;
//wa[1] = da.popup1.style;
//wa[1] = da.popup1.style;
// 쿠키 유지 기간 계산 (사용은 옵션)
Cookies.SetTime = function(days) {
return (days * 24 * 60 * 60 * 1000);
}
// 쿠키 저장
Cookies.Set = function(setName,val,days,SEQ) {
var when = new Date();
when.setDate(when.getDate() + days);
var date = when.toGMTString();
document.cookie = setName +"="+ val +";path=/;expires="+ date;
fnClose(SEQ); // 팝업 닫기
}
// 저장된 쿠키 확인 (인덱스에서 체크하는 부분)
Cookies.Get = function(setName) {
cookies = document.cookie +";";
if ( (pos = cookies.indexOf(setName +"=" ))== -1 ) {
return false;
} else {
spos = cookies.indexOf("=",pos);
epos = cookies.indexOf(";",spos);
return (cookies.substring(spos +1,epos));
}
}
// 팝업창 닫기
function fnClose(SEQ) {
pa[SEQ].display = "none";
document.onmousemove = " ";
}
// 오늘닫기 안된 팝업만 띄우기
function fnNotice() {
var flag= false;
var da= document.all;
for ( i=0; i<wa.length; i++ ) {
flag = Cookies.Get("popup"+ i);
if ( flag != "Y" )
pa[i].display = "block";
}
}
return (days * 24 * 60 * 60 * 1000);
}
// 쿠키 저장
Cookies.Set = function(setName,val,days,SEQ) {
var when = new Date();
when.setDate(when.getDate() + days);
var date = when.toGMTString();
document.cookie = setName +"="+ val +";path=/;expires="+ date;
fnClose(SEQ); // 팝업 닫기
}
// 저장된 쿠키 확인 (인덱스에서 체크하는 부분)
Cookies.Get = function(setName) {
cookies = document.cookie +";";
if ( (pos = cookies.indexOf(setName +"=" ))== -1 ) {
return false;
} else {
spos = cookies.indexOf("=",pos);
epos = cookies.indexOf(";",spos);
return (cookies.substring(spos +1,epos));
}
}
// 팝업창 닫기
function fnClose(SEQ) {
pa[SEQ].display = "none";
document.onmousemove = " ";
}
// 오늘닫기 안된 팝업만 띄우기
function fnNotice() {
var flag= false;
var da= document.all;
for ( i=0; i<wa.length; i++ ) {
flag = Cookies.Get("popup"+ i);
if ( flag != "Y" )
pa[i].display = "block";
}
}
// 마우스 클릭 유지
function fnMoveDownLayer(obj) {
objLayer = obj;
obj.moveFlag = "true";
document.onmousemove = fnMoveLayer;
obj.xVal = event.clientX;
obj.yVal = event.clientY;
}
function fnMoveDownLayer(obj) {
objLayer = obj;
obj.moveFlag = "true";
document.onmousemove = fnMoveLayer;
obj.xVal = event.clientX;
obj.yVal = event.clientY;
}
// 마우스 클릭 해제
function fnMoveUpLayer(obj) {
obj.moveFlag = "false";
}
obj.moveFlag = "false";
}
// 마우스 움직일때 창위치 계산
function fnMoveLayer() {
if ( objLayer.moveFlag=="true" ) {
var distX = event.clientX - objLayer.xVal;
var distY = event.clientY - objLayer.yVal;
objLayer.style.left = parseInt(objLayer.style.left) + distX;
objLayer.style.top = parseInt(objLayer.style.top) + distY;
objLayer.xVal = event.clientX;
objLayer.yVal = event.clientY;
}
return false;
}
</script>
</head>
<body onLoad="javascript:fnNotice();">
<!-- Layer만 따로 파일로 만들어서 인크루드 하면 페이지가 깔끔해 진다. -->
<div id="popup0" style="left:200px; top:30px; width:100px; height:100px; position:absolute; z-index:1; display:none;" moveFlag="false" xVal="" yVal="">
<table width="390" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<a href="javascript:;" onmousedown="fnMoveDownLayer(popup0);" onmouseup="fnMoveUpLayer(popup0);" style="cursor: default;">
<tr>
<td width="272" height="24" background="/images/topLeft.gif"> </td>
<td background="/images/topBlank.gif"> </td>
<a href="javascript:fnClose(0);" style="cursor: default;">
<td width="32" background="/images/topRight.gif"> </td></a>
</tr></a>
</table></td>
</tr>
<tr>
<td>
<table width="100%" height="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td width="5" background="/images/left.gif"> </td>
<td>
<table width="100%" height="200" border="0" cellpadding="0" cellspacing="0">
<tr><td> </td></tr>
<tr>
<td width="20"> </td>
<td>
<b><span style="font-size:14pt;">팝업 제목</span></b><br /><br />
여기다가 내용 쓰기<br />
</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td align="right" colspan="2">
<input type="checkbox" id="nosee0" onClick="javascript:Cookies.Set('popup0','Y',1,0);" onFocus="blur();"
/><Label for="nosee0">오늘하루 안보기</Label>
</td>
</tr>
<tr><td colspan="2"> </td></tr>
</table>
</td>
<td width="5" background="/images/right.gif"> </td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#ffffff">
<td height="5" background="/images/BottomLeft.gif"></td>
<td background="/images/BottomBlank.gif"></td>
<td background="/images/BottomRight.gif"></td>
</tr>
<tr>
<td width="272" height="5"></td>
<td> </td>
<td width="32"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
function fnMoveLayer() {
if ( objLayer.moveFlag=="true" ) {
var distX = event.clientX - objLayer.xVal;
var distY = event.clientY - objLayer.yVal;
objLayer.style.left = parseInt(objLayer.style.left) + distX;
objLayer.style.top = parseInt(objLayer.style.top) + distY;
objLayer.xVal = event.clientX;
objLayer.yVal = event.clientY;
}
return false;
}
</script>
</head>
<body onLoad="javascript:fnNotice();">
<!-- Layer만 따로 파일로 만들어서 인크루드 하면 페이지가 깔끔해 진다. -->
<div id="popup0" style="left:200px; top:30px; width:100px; height:100px; position:absolute; z-index:1; display:none;" moveFlag="false" xVal="" yVal="">
<table width="390" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<a href="javascript:;" onmousedown="fnMoveDownLayer(popup0);" onmouseup="fnMoveUpLayer(popup0);" style="cursor: default;">
<tr>
<td width="272" height="24" background="/images/topLeft.gif"> </td>
<td background="/images/topBlank.gif"> </td>
<a href="javascript:fnClose(0);" style="cursor: default;">
<td width="32" background="/images/topRight.gif"> </td></a>
</tr></a>
</table></td>
</tr>
<tr>
<td>
<table width="100%" height="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td width="5" background="/images/left.gif"> </td>
<td>
<table width="100%" height="200" border="0" cellpadding="0" cellspacing="0">
<tr><td> </td></tr>
<tr>
<td width="20"> </td>
<td>
<b><span style="font-size:14pt;">팝업 제목</span></b><br /><br />
여기다가 내용 쓰기<br />
</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td align="right" colspan="2">
<input type="checkbox" id="nosee0" onClick="javascript:Cookies.Set('popup0','Y',1,0);" onFocus="blur();"
/><Label for="nosee0">오늘하루 안보기</Label>
</td>
</tr>
<tr><td colspan="2"> </td></tr>
</table>
</td>
<td width="5" background="/images/right.gif"> </td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#ffffff">
<td height="5" background="/images/BottomLeft.gif"></td>
<td background="/images/BottomBlank.gif"></td>
<td background="/images/BottomRight.gif"></td>
</tr>
<tr>
<td width="272" height="5"></td>
<td> </td>
<td width="32"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
[출처] 항해자
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|