예쁜 레이어 팝업창 (드래그, 다중팝업 등) 닫힌 팝업창 켜기
페이지 정보
작성자 서방님 댓글 0건 조회 212회 작성일 07-03-29 14:41본문
<HTML>
<HEAD>
<STYLE type=text/css>
BODY {font-size: 9pt; background: #ffffff; color: #787878; font-family: 굴림,tahoma; margin:0; padding:0;}
#menu {position:absolute; top:0; left: 0; background: #eee; width: 100%; padding: 10pt; border-bottom: 1px solid #ccc;}
ul {list-style: none;}
li {float: left; font-weight: bold; padding-left: 10pt;}
a {cursor: hand;}
</STYLE>
<!-- windows -->
<script language="JavaScript">
<!--
function insertExternalFile(fname,W,H)
{
if (navigator.appName.indexOf("Microsoft")!=-1 || navigator.appName=="Netscape" && parseInt(navigator.appVersion)>4)
{
document.write(''
+'<IFRAME src="'+fname+'" scrolling="yes" frameborder=1 border=1'
+(W==null ? '' : ' width='+W)
+(H==null ? '' : ' height='+H)
+'></IFRAME>'
)
}
if (navigator.appName=="Netscape" && parseInt(navigator.appVersion)==4)
{
document.write(''
+'<ILAYER>'
+'<LAYER src="'+fname+'" '
+(W==null ? '' : ' width='+W)
+(H==null ? '' : ' height='+H)
+'></LAYER></ILAYER>'
)
}
}
//-->
</script>
</HEAD>
<BODY>
<script language=javascript>
var IE5=(document.getElementById && document.all)? true: false;
var W3C=(document.getElementById)? true: false;
var currIDb=null, currIDs=null, xoff=0, yoff=0; zctr=0; totz=0;
function trackmouse(evt)
{
if((currIDb!=null) && (currIDs!=null))
{
var x=(IE5)? event.clientX+document.body.scrollLeft : evt.pageX;
var y=(IE5)? event.clientY+document.body.scrollTop : evt.pageY;
currIDb.style.left=x+xoff+'px';
currIDs.style.left=x+xoff+10+'px';
currIDb.style.top=y+yoff+'px';
currIDs.style.top=y+yoff+10+'px';
return false;
}
}
function stopdrag()
{
currIDb=null;
currIDs=null;
NS6bugfix();
}
function grab_id(evt)
{
xoff=parseInt(this.IDb.style.left)-((IE5)? event.clientX+document.body.scrollLeft : evt.pageX);
yoff=parseInt(this.IDb.style.top)-((IE5)? event.clientY+document.body.scrollTop : evt.pageY);
currIDb=this.IDb;
currIDs=this.IDs;
}
function NS6bugfix()
{
if(!IE5)
{
self.resizeBy(0,1);
self.resizeBy(0,-1);
}
}
function incrzindex()
{
zctr=zctr+2;
this.subb.style.zIndex=zctr;
this.subs.style.zIndex=zctr-1;
}
function createPopup(id, title, width, height, x , y , isdraggable, boxcolor, barcolor, shadowcolor, text, textcolor, textptsize, textfamily )
{
if(W3C)
{
zctr+=2;
totz=zctr;
var txt='';
txt+='<div id="'+id+'_s" style="position:absolute; left:'+(x+7)+'px; top:'+(y+7)+'px; width:'+width+'px; height:'+height+'px; background-color:'+shadowcolor+'; filter:alpha(opacity=30); visibility:visible"> </div>';
txt+='<div id="'+id+'_b" style="border:outset '+barcolor+' 2px; position:absolute; left:'+x+'px; top:'+y+'px; width:'+width+'px; overflow:hidden; height:'+height+'px; background-color:'+boxcolor+'; visibility:visible">';
txt+='<div style="width:'+width+'px; height:16px; background-color:'+barcolor+'; padding:0px; border:1px"><table cellpadding="0" cellspacing="0" border="0" width="'+(IE5? width-4 : width)+'"><tr><td width="'+(width-20)+'"><div id="'+id+'_h" style="width:'+(width-20)+'px; height:14px; font: bold 12px Tahoma; cursor:move; color:'+textcolor+'"> '+title+'</div></td><td align="right"><a onmousedown="document.getElementById(''+id+'_s').style.display='none'; document.getElementById(''+id+'_b').style.display='none';return false"><img src="http://www.blueb.co.kr/SRC/javascript/image/close.gif" border="0" height="15" width="15"></a></td></tr></table></div>';
txt+='<div id="'+id+'_ov" width:'+width+'px; style="margin:5px; color:'+textcolor+'; font:'+textptsize+'pt '+textfamily+';">'+text+'</div></div>';
document.write(txt);
this.IDh=document.getElementById(id+'_h');
this.IDh.IDb=document.getElementById(id+'_b');
this.IDh.IDs=document.getElementById(id+'_s');
this.IDh.IDb.subs=this.IDh.IDs;
this.IDh.IDb.subb=this.IDh.IDb;
this.IDh.IDb.IDov=document.getElementById(id+'_ov');
if(IE5)
{
this.IDh.IDb.IDov.style.width=width-6;
this.IDh.IDb.IDov.style.height=height-22;
this.IDh.IDb.IDov.style.scrollbarBaseColor=boxcolor;
this.IDh.IDb.IDov.style.overflow="auto";
}
else
{
this.IDh.IDs.style.MozOpacity=.5;
}
this.IDh.IDb.onmousedown=incrzindex;
if(isdraggable)
{
this.IDh.onmousedown=grab_id;
this.IDh.onmouseup=stopdrag;
}
}
}
if(W3C)document.onmousemove=trackmouse;
if(!IE5 && W3C)window.onload=NS6bugfix;
</script>
<script language=javascript>
createPopup( 'popup1', 'popup 1' , 300, 120, 50, 50, true, '#ebebeb' , '#787878' , '#cccccc' , '<font color="#787878">You can drag and drop these boxes by using the titlebar as the handle if dragging has been enabled.<br>Dragging has been disabled for this box.</font>' , '#ffffff' , 8 , 'Tahoma');
// 이부분은 팝업창을 두개 이상할때를 보여주기 위한 부분입니다.
createPopup( 'popup2', 'popup 2' , 220, 130, 50, 250, true, '#c0c0c0' , '#555555' , '#c0c0c0' , 'The HTML in these boxes will wrap if they need to. In NS6, any HTML past the bottom will get chopped off (because of some weird stuff NS6 does while dragging scrollable DIVs), while IE will display a scrollbar to scroll down.<br><br>' , '#f3f3f3' , 10 , 'Arial');
// 이부분은 팝업창을 두개 이상할때를 보여주기 위한 부분입니다.
createPopup( 'popup3', 'popup 3' , 320, 130, 250, 80, true, '#c0c0c0' , '#555555' , '#c0c0c0' , '레이어 팝업창을 닫았을경우 다시 다시 그창을 여는 스크립트입니다. 블루비에 있는 소스에 그 메뉴만 추가했습니다. 메뉴 주석 아래를 잘 살펴 보세요. ㅇㅇ ' , '#f3f3f3' , 10 , 'Arial');
</script>
<!-- 메뉴 -->
<div id="menu">
<ul>
<li><a onmousedown="popup1_s.style.display=''; popup1_b.style.display='';return true">팝업1 열기</a></li>
<li><a onmousedown="popup2_s.style.display=''; popup2_b.style.display='';return true">팝업2 열기</a></li>
<li><a onmousedown="popup3_s.style.display=''; popup3_b.style.display='';return true">팝업3 열기</a></li>
</ul>
</div>
</BODY>
</HTML>
댓글목록
등록된 댓글이 없습니다.
