팝업창 모음

목록 by 신지@img75.com 0 down 2006.10.11 12:46 2,553 Hit 1 review 스크랩 페이스북에 공유하기 트위터에 공유하기 신고

1. 옵션을 HEAD안에... <script language="JavaScript"> function openNewWindow(window) { open (window,"NewWindow","left=0, top=0, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=200, height=200"); } </script> <a href=javascript:openNewWindow("주소입력")>새창열기</a>
2. 링크에 옵션을 지정... <a href="javascript:;" onclick="window.open('주소입력','name','resizable=no width=200 height=200');return false">새창열기</a>
* 옵션 * 새창 뛰울때 용도에 맞게 옵션 설정을 해줍니다. "YES" 또는 "NO" 로 지정 해주면 됩니다. menubar - 파일, 편집, 보기....부분 toolbar - 뒤로, 앞으로, 새로고침 아이콘등이 있는 부분 directories - 연결 디렉토리가 표시되는 부분 location - 주소 입력창 status - 아래 브라우저 상태 바 scrollbars - 스크롤 resizable - 리사이즈 옵션
 
 1.자동 띄우기 
팝업창에 삽입 <html> <head> <title></title> <script language="javascript">  </script> </head> <body onload="javascript:pop()"> 이벤트 팝업창을 띄우기 </body> </html> 
 2.프레임이 있는 팝업창 닫기 
팝업창에 삽입 <html> <head> <title></title> <script language="Javascript">  </script> </head> <body> <a href="javascript:frameclose()">프레임셋 한방에 닫기</a> </body> </html> 
 3.팝업창 닫고 프레임이 없는 부모창에서 원하는 페이지로 이동하기 
팝업창에 삽입 <html> <head> <title></title> <script language="javascript">  </script> </head> <body> <a href="javascript:MovePage();">자세한내용보기</a> </body> </html>
 4.팝업창 닫고 프레임이 있는 부모창에서 원하는 페이지로 이동하기 
팝업창에 삽입하고 팝업창의 설정은 프레임셋 페이지에 해야함 오픈창이 아닐경우에는 window.top.프레임이름.location.href="연결할파일" 적용한다 <html> <head> <title></title> <script language="javascript">  </script> </head> <body> <a href="javascript:MovePage();">자세한내용보기</a> </body> </html> 
 5.팝업창 자동으로 닫기
팝업창에 삽입 <html> <head> <title>Close Window Timer</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript">  </script> </head> <body onLoad="closeWin('5000')"> 이창은 5초후 자동으로 창이 닫힘니다. </body> </html>
 6.프레임 나눈 팝업창 한번에 닫기 
팝업창에 삽입 <html> <head> <title>Close Window Timer</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript">  </script> </head> <body onLoad="closeWin('5000')"> 이창은 5초후 자동으로 창이 닫힘니다. </body> </html>
 7.하루동안 팝업창 띄우지 않기 소스 예제1 
부모창인 index.htm에 삽입 <html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="javascript">  </script> </head> <body> </body> </html>
 
팝업창인 pop.htm에 삽입 <html> <head> <title></title> <head> <script language="JavaScript">  </script> </head> <body onunload="closeWin()"> <form name="myform"> <input type="checkbox" name="event">다음부터 이 창을 열지않음 <input type=button value="닫기" onclick="self.close()"> </form> </body> </html> 
 8.하루동안 팝업창 띄우지 않기 소스 예제2 
부모창인 index.htm에 삽입 <html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <head> <SCRIPT LANGUAGE="JavaScript">  </script> </head> <body> </body> </html>
 
팝업창인 pop.htm에 삽입 <html> <head> <title></title> <head> <SCRIPT language="JavaScript">  </script> </head> <body onunload="closeWin()"> <form> <input type=CHECKBOX name="Notice" value="">다시 팝업 안뜸 <a href="javascript:window.close()">닫기</a> </form> </body> </html> 
 9.같은 브라우져에서 팝업 띄우기 않기
부모창인 index.htm에 삽입 <html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="javascript">  </script> </head> <body> </body> </html> 
 팝업창인 pop.htm에 삽입 <html> <head> <title></title> <head> <script language="JavaScript">  </script> </head> <body onunload="closeWin()"> <form name="myform"> <input type="checkbox" name="event">다음부터 이 창을 열지않음 <input type=button value="닫기" onclick="self.close()"> </form> </body> </html> 
 10.팝업창 가운데에 자동띄우기 
팝업창에 삽입 <html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript">  </script> </head> <body onLoad="winCentre()"> </body> </html> 
 11.부모창에서 클릭하면 팝업창 가운데에 띄우기 
부모창에 삽입 <html> <head> <title></title> <head> <script language="JavaScript">  </script> <body> <a href="팝업창파일" onclick="NewWindow(this,'name','100','100','yes');return false"> 링크</a> </body> </html> 
 12.같은 브라우져에서만 팝업 띄우기 않기
부모창인 index.htm에 삽입 _새로 브라우져를 열면 팝업창이 뜸 <html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="javascript">  </script> </head> <body> </body> </html> 
 
팝업창인 pop.htm에 삽입 <html> <head> <title></title> <head> <script language="JavaScript">  </script> </head> <body onunload="closeWin()"> <form name="myform"> <input type="checkbox" name="event">다음부터 이 창을 열지않음 <input type=button value="닫기" onclick="self.close()"> </form> </body> </html> 
 13.링크걸어서 지정된 사이즈로 열기
<html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language='JavaScript'>  </script> </head> <body> <a HREF="javascript:winopen('주소')">링크걸기</a> </body> </html>
 14.자동으로 지정된 크기로 브라우저 열기
<html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language='JavaScript'>  </script> </head> <body>  </body> </html>
 15.해상도에 맞추어 전체장으로 늘어남
<html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript"> function winMaximizer() { if (document.layers) { larg = screen.availWidth - 10; altez = screen.availHeight - 20; } else { var larg = screen.availWidth; var altez = screen.availHeight; } self.resizeTo(larg, altez); self.moveTo(0, 0); } </script> </head> <body onload="winMaximizer()"> 해상도에 맞추어 전체장으로 늘어남 </body> </html>
 16.이미지 클릭시 html문서없이 큰이미지로 새창띄우기
<html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript"> var win1Open = null function displayImage(picName, windowName, windowWidth, windowHeight){ return window.open(picName,windowName,"toolbar=no, 
scrollbars=no,resizable=no,width=" + (parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15)) } function winClose(){ if(win1Open != null) win1Open.close() } function doNothing(){} </script> <script language="JavaScript1.1"> function displayImage(picName, windowName, 
windowWidth, windowHeight){ var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,
resizable=no,width=" + windowWidth + ",height=" + windowHeight) if(winHandle != null){ var htmlString = "<html><head><title>Picture</title></head>" htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>" htmlString += "<a href=javascript:window.close()><img src=" + picName + " border=0 alt=닫기></a>" htmlString += "</body></html>" winHandle.document.open() winHandle.document.write(htmlString) winHandle.document.close() } if(winHandle != null) winHandle.focus() return winHandle } </script> </head> <body> <a href="javascript:doNothing()" onClick="win1Open=displayImage('큰 이미지파일', 'popWin1', '300', '400')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''"> <img src=이미지파일" border="0"></a> </body> </html>
 17.몇초후 웹페이지이동하기 소스예제1 
<html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript"> function nextWin() {location = "이동할 URL"} </script> </head> <body onLoad="setTimeout('nextWin()', 1000)">  바로 이동한 원하는 사이트로 이동함 </body> </html>
 18.몇초후 웹페이지이동하기 소스예제2
<html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript"> self.location.replace('이동할 URL'); </script> </head> <body> 바로 이동한 원하는 사이트로 이동함 </body> </html>
 19.자동새로고침하기
<html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript">  </script> </head> <body> 자동새로고침하기 </body> </html>
 20.해상도에 따라 다른 웹페이지 열기 
<html> <head> <title>..</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript">  </script> </head> <body Onload="redirectPage()"> </body> </html>
 
30.HTML파일 없이 이미지 사이즈에 맞게 팝업창 띄우기. <script Language="Javascript">  var cnj_img_view = null; function cnj_win_view(img){ img_conf1= new Image(); img_conf1.src=(img); cnj_view_conf(img); }
function cnj_view_conf(img){ if((img_conf1.width!=0)&&(img_conf1.height!=0)){ cnj_view_img(img); } else { funzione="cnj_view_conf('"+img+"')"; intervallo=setTimeout(funzione,20); } }
function cnj_view_img(img){ if(cnj_img_view != null) { if(!cnj_img_view.closed) { cnj_img_view.close(); } } cnj_width=img_conf1.width+20; cnj_height=img_conf1.height+20; str_img="width="+cnj_width+",height="+cnj_height; cnj_img_view=window.open(img,"cnj_img_open",str_img); cnj_img_view.focus(); return; } </script>
 
<a href="javascript:cnj_win_view('../img/cnjlogo.gif')"><img src="../img/cnjlogo.gif" border="0" width="247" height="55"></a>
32.이미지사이즈에 맞게 새창이 열리며 휠마우스 효과를 내줌 그리고 메인(imgmove-main.html)에서 새창 띄워주는 부분
<SCRIPT LANGUAGE="JavaScript">  </script> <a href="javascript:cnjOpen()"><img src="test.jpg" width="200" height="150" border="0"></a> </center>
이 부분은 이미지를 보여줄 새창(img-move.html)입니다. <style> body {cursor:move;} </style> <body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onLoad="fitWindowSize();">
<SCRIPT LANGUAGE="JavaScript"> // 이미지는 별도로 제공하지 않습니다.   var ie = 1; var windowX, windowY; var bLargeImage = 0; var x,y;
var InitX = 500;
// 이미지가 새창에 맞게 조절되는 부분
function fitWindowSize() { if( ie ) { window.resizeTo( InitX, InitX ); width = InitX - (document.body.clientWidth - document.images[0].width); height = InitX - (document.body.clientHeight - document.images[0].height); windowX = (window.screen.width-width)/2; windowY = (window.screen.height-height)/2; if( width > screen.width-50 ) { width = screen.width-50; windowX = 20; bLargeImage = 1; } if( height > screen.height-80 ) { height = screen.height-80; windowY = 20; bLargeImage = 1; } window.moveTo( windowX, windowY ); window.resizeTo( width, height+4 ); } else { window.innerWidth = document.layers[0].document.images[0].width; window.innerHeight = document.layers[0].document.images[0].height; } }
// 휠마우스 효과
function move() { if(bLargeImage){ window.scroll(window.event.clientX - 50,window.event.clientY -50); } }
// 오른쪽 왼쪽 마우스 클릭시 창닫는 부분
function click() { if ((event.button==1) || (event.button==2) || (event.button==3)) { top.self.close(); } } document.onmousedown=click
</script> <img src="<A class=con_link href="http://www.cginjs.com/cgi/js/test.jpg" target=_blank>http://www.cginjs.com/cgi/js/test.jpg</A>" border="0" ONMOUSEMOVE="move();">

좋아요 페이스북에 공유하기 트위터에 공유하기 스크랩 첨부 오류신고

의견 1 자료등록 목록

NEWSLETTER SIGN UP