| 글쓴이:후니 | 마지막으로 그림자 레이어, 사이즈 조절도 가능 | 조회수:3004 |
|
 후니 | <link href="http://www.scriptasylum.com/scripts.css" rel="stylesheet" type="text/css"> <SCRIPT LANGUAGE="JavaScript"> <!-- // Popup Windows - V 3.0 // Author: Brian Gosselin // Site URL: http://scriptasylum.com // // Browser compatibility: // IE4+, NS4+, NS6+ (with limited functionality in pre 5.0 browsers) // // Supported Features: // > Seperate Drag and Drop (both can be disabled), minimize/restore/close, drag resize, and // fonts/colors/dimensions/placement for each popup. // > Allows any number of popups per page limited only by browser/computer performance. // > Popups are created after page runtime allowing for truly dynamic windows. // > Popups can be created in their "closed" state and then opened via javascript function if desired. // > Degrades gracefully in older browsers by creating normal browser windows. var W3C=(document.getElementById)? true: false; var IE5=(W3C && document.all)? true : false; var NS6=(W3C && (navigator.appName=="Netscape"))? true: false; currIDb=null; xoff=0; yoff=0; currRS=null; rsxoff=0; rsyoff=0; oldac=null; newac=null; zdx=1; mx=0; my=0; var idlist=new Array(); idlist.btns=new Array(); idlist.btns[0]=new Image(); idlist.btns[0].src="http://www.scriptasylum.com/min.gif"; idlist.btns[1]=new Image(); idlist.btns[1].src="http://www.scriptasylum.com/max.gif"; idlist.btns[2]=new Image(); idlist.btns[2].src="http://www.scriptasylum.com/close.gif"; idlist.btns[3]=new Image(); idlist.btns[3].src="http://www.scriptasylum.com/resize.gif"; function hidebox(id){ if(W3C){ document.getElementById(id+'_b').style.display='none'; document.getElementById(id+'_s').style.display='none'; }} function showbox(id){ if(W3C){ var bx=document.getElementById(id+'_b').style; var sh=document.getElementById(id+'_s').style; bx.display='block'; sh.display='block'; sh.zIndex=++zdx; bx.zIndex=++zdx; }} function minimize(){ if(W3C){ this.IDS[0].style.height=(IE5)? '28px':'24px'; this.IDS[3].style.height='28px'; this.IDS[2].style.display='none'; this.IDS[4].style.display='none'; setTimeout('NS6bugfix()',100); }} function restore(){ if(W3C){ var h=this.IDS[10]; this.IDS[0].style.height=h+'px'; //box this.IDS[3].style.height=(IE5)? h+'px':h+5+'px'; //shd this.IDS[2].style.display='block'; this.IDS[4].style.display='block'; setTimeout('NS6bugfix()',100); }} function NS6bugfix(){ self.resizeBy(0,1); self.resizeBy(0,-1); } function trackmouse(evt){ mx=(IE5)?event.clientX+document.body.scrollLeft:evt.pageX; my=(IE5)?event.clientY+document.body.scrollTop:evt.pageY; if(!NS6)movepopup(); if((currIDb!=null)||(currRS!=null))return false; } function movepopup(){ if((currIDb!=null)&&W3C){ var x=mx+xoff; var y=my+yoff; currIDb.style.left=x+'px'; currIDs.style.left=x+8+'px'; currIDb.style.top=y+'px'; currIDs.style.top=y+8+'px'; } if((currRS!=null)&&W3C){ var rx=mx+rsxoff; var ry=my+rsyoff; var c=currRS; c.style.left=Math.max(rx,((NS6)?92:88))+'px'; c.style.top=Math.max(ry,((NS6)?72:68))+'px'; c.IDS[0].style.width=Math.max(rx+((NS6)?8:12),100)+'px'; c.IDS[0].style.height=Math.max(ry+((NS6)?8:12),80)+'px'; c.IDS[1].style.width=Math.max(rx+((NS6)?3:4),((NS6)?95:92))+'px'; c.IDS[5].style.left=parseInt(c.IDS[1].style.width)-48+'px'; c.IDS[3].style.width=Math.max(rx+12,((NS6)?104:100))+'px'; c.IDS[3].style.height=Math.max(ry+((NS6)?13:12),((NS6)?86:80))+'px'; c.IDS[2].style.width=Math.max(rx-((NS6)?5:-5),((NS6)?87:92))+'px'; c.IDS[2].style.height=Math.max(ry-((NS6)?28:24),44)+'px'; c.IDS[10]=parseInt(c.IDS[0].style.height); }} function startRS(evt){ var ex=(IE5)?event.clientX+document.body.scrollLeft:evt.pageX; var ey=(IE5)?event.clientY+document.body.scrollTop:evt.pageY; rsxoff=parseInt(this.style.left)-ex; rsyoff=parseInt(this.style.top)-ey; currRS=this; if(NS6)this.IDS[2].style.overflow='hidden'; return false; } function stopdrag(){ currIDb=null; NS6bugfix(); } function grab_id(evt){ var ex=(IE5)?event.clientX+document.body.scrollLeft:evt.pageX; var ey=(IE5)?event.clientY+document.body.scrollTop:evt.pageY; xoff=parseInt(this.IDS[0].style.left)-ex; yoff=parseInt(this.IDS[0].style.top)-ey; currIDb=this.IDS[0]; currIDs=this.IDS[3]; return false; } function subBox(x,y,w,h,bgc,id){ var v=document.createElement('div'); v.setAttribute('id',id); v.style.position='absolute'; v.style.left=x+'px'; v.style.top=y+'px'; v.style.width=w+'px'; v.style.height=h+'px'; v.style.backgroundColor=bgc; v.style.visibility='visible'; v.style.padding='0px 0px 0px 0px'; return v; } function popUp(x,y,w,h,cid,text,bgcolor,textcolor,fontstyleset,title,titlecolor,titletextcolor,bordercolor,scrollcolor,shadowcolor,showonstart,isdrag,isresize,doold){ if(W3C){ var tw, th; w=Math.max(w,100); h=Math.max(h,80); var rdiv=new subBox(w-((IE5)?12:8),h-((IE5)?12:8),7,7,'',cid+'_rs'); if(isresize){ rdiv.innerHTML='<img src="http://www.scriptasylum.com/resize.gif" width="7" height="7">'; rdiv.style.cursor='move'; } tw=(IE5)?w:w+4; th=(IE5)?h:h+6; var shadow=new subBox(x+8,y+8,tw,th,shadowcolor,cid+'_s'); if(IE5)shadow.style.filter="alpha(opacity=50)"; if(NS6)shadow.style.MozOpacity=.5; shadow.style.zIndex=++zdx; var tw,th; var outerdiv=new subBox(x,y,w,h,bordercolor,cid+'_b'); outerdiv.style.borderStyle="outset"; outerdiv.style.borderWidth="2px"; outerdiv.style.borderColor=bordercolor; outerdiv.style.zIndex=++zdx; tw=(IE5)?w-8:w-5; th=(IE5)?h+4:h-4; var titlebar=new subBox(2,2,tw,20,titlecolor,cid+'_t'); titlebar.style.overflow="hidden"; titlebar.style.cursor="default"; titlebar.innerHTML='<span style="position:absolute; left:3px; top:1px; font:bold 10pt sans-serif; color:'+titletextcolor+'; height:18px; overflow:hidden; clip-height:16px;">'+title+'</span><span id="'+cid+'_btt" style="position:absolute; width:48px; height:16px; left:'+(tw-48)+'px; top:2px;"><img src="http://www.scriptasylum.com/min.gif" width="16" height="16" id="'+cid+'_min"><img src="http://www.scriptasylum.com/max.gif" width="16" height="16" id="'+cid+'_max"><img src="http://www.scriptasylum.com/close.gif" width="16" height="16" id="'+cid+'_cls"></span>'; tw=(IE5)?w-7:w-13; th=(IE5)?h-36:h-36; var content=new subBox(2,24,tw,th,bgcolor,cid+'_c'); content.style.borderColor=bordercolor; content.style.borderStyle="inset"; content.style.borderWidth="2px"; content.style.overflow="auto"; content.style.padding="0px 2px 0px 4px"; content.style.font=fontstyleset; content.style.color=textcolor; if(IE5)content.style.scrollbarBaseColor=scrollcolor; content.innerHTML=text; outerdiv.appendChild(titlebar); outerdiv.appendChild(content); outerdiv.appendChild(rdiv); document.body.appendChild(shadow); document.body.appendChild(outerdiv); if(!showonstart)hidebox(cid); var IDS=new Array(); IDS[0]=document.getElementById(cid+'_b'); IDS[1]=document.getElementById(cid+'_t'); IDS[2]=document.getElementById(cid+'_c'); IDS[3]=document.getElementById(cid+'_s'); IDS[4]=document.getElementById(cid+'_rs'); IDS[5]=document.getElementById(cid+'_btt'); IDS[6]=document.getElementById(cid+'_min'); IDS[7]=document.getElementById(cid+'_max'); IDS[8]=document.getElementById(cid+'_cls'); IDS[9]=cid; IDS[10]=h; this.IDb=IDS[0]; this.IDb.IDS=IDS; this.IDt=IDS[1]; this.IDt.IDS=IDS; this.IDc=IDS[2]; this.IDc.IDS=IDS; this.IDs=IDS[3]; this.IDs.IDS=IDS; this.IDrs=IDS[4]; this.IDrs.IDS=IDS; this.IDbtt=IDS[5]; this.IDbtt.IDS=IDS; this.IDmin=IDS[6]; this.IDmin.IDS=IDS; this.IDmax=IDS[7]; this.IDmax.IDS=IDS; this.IDcls=IDS[8]; this.IDcls.IDS=IDS; this.IDb.activecolor=titlecolor; this.IDb.inactivecolor=scrollcolor; if(oldac!=null)oldac.IDS[1].style.backgroundColor=oldac.inactivecolor; oldac=this.IDb; this.IDcls.onclick=new Function("hidebox('"+cid+"');"); if(isresize){ this.IDmin.onclick=minimize; this.IDmax.onclick=restore; this.IDrs.onmousedown=startRS; this.IDrs.onmouseup=new Function("currRS=null"); } this.IDb.onmousedown=function(){ if(oldac!=null){ //if(NS6)oldac.IDS[2].style.overflow='hidden'; oldac.IDS[1].style.backgroundColor=oldac.inactivecolor; } if(NS6)this.IDS[2].style.overflow='auto'; oldac=this; this.IDS[1].style.backgroundColor=this.activecolor; this.IDS[3].style.zIndex=++zdx; this.style.zIndex=++zdx; } if(isdrag){ this.IDt.onmousedown=grab_id; this.IDt.onmouseup=stopdrag; } }else{ if(doold){ var ctr=new Date(); ctr=ctr.getTime(); var win=window.open("" , "abc"+ctr , "status=no,menubar=no,width="+w+",height="+h+",resizable=yes,scrollbars=yes"); var t='<html><head><title>'+title+'</title></head><body bgcolor="'+bgcolor+'"><font style="font:'+fontstyleset+'; color:'+textcolor+'">'+text+'</font></body></html>'; win.document.write(t); win.document.close(); }}} if(NS6)setInterval('movepopup()',40); if(W3C){ document.onmousemove=trackmouse; document.onmouseup=new Function("currRS=null"); } //--> </SCRIPT> <script language="javascript"> window.onload=function(){ new popUp(390, 10, 310, 190, "Div", "업무때문에 서핑하다가 찾은 소스입니다.<br>어딘가에 그림자 레이어에 대한 내용을 본것도 같은데...<br>유용하게 사용하세요<br>Ex) 공지사항, 알림, 메시지, 쪽지등...<br><br>기능도 다양합니다. 줄이기, 키우기, 닫기, 사이즈조절까지", "#D9D9D9", "black", "9pt verdana", "공지사항.....", "#00385c", "white", "#006bae", "#00436e", "black",true,true,true,false); } </script> | 03/10 16:33:46  |
| 후니 | 귀찮아서 스타일을 끌어다 셨더니 이런일이... 여하튼 유용하게 쓰세요. 이 소스에 표시된 URL에 보시면 유용한 팁이 많습니다. | 03/10 17:01:41 |
| kkun | 멋진스크립트 공개해주셔서 감사합니다. | 03/10 20:51:55 |
 스쿨바보들.. | 존나 느리네..이런거 왜쓴담? | 03/10 22:23:33 |
| TheHP | 소스길이가 장난이 아니군요 ㅡㅡ | 03/10 23:16:47 |
 행복한고니 | 존나 느린 것은 바보님의 컴퓨터가 존나 느리기 때문입니다. 자바스크립트거든요. | 03/11 2:33:47 |
| @@ | 아 어지러워~~ @@? | 03/11 4:40:12 |
| Nobody | 행복한고니// You Win!!! | 03/11 8:52:48 |
 ㅋㅋ | 행복한 고니 님 윈 에 한표ㅋㅋㅋ | 04/30 15:39:31 |
'DHTML' 카테고리의 다른 글
| 테이블 내에 form 태그 쓸때.. (5) | 2005.04.22 |
|---|---|
| [펌] HTML 엔티티(Entities) (0) | 2005.03.17 |
| [phpschool 펌] 메모글 중 Iframe 자동조절.. (2) | 2005.03.03 |
| [phpschool 펌] iframe 높이 조절 (0) | 2005.03.03 |
| [펌] 브라우저에서 인쇄 미리보기 설정방법 (0) | 2005.02.24 |