답변 2
2016-10-05 10:28:39 61.♡.♡.35
<img src="이미지경로" style="cursor:pointer" title="window.open('새창페이지URL','asdfo8or','scrollbars=yes,width=417,height=385,top=10,left=20');">
사랑둥이님의 댓글
↳ 사랑둥이 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색2016-10-05 10:39:28124.♡.♡.3
한번에 해결되었습니다. 감사합니다.
2016-10-05 10:30:32 118.♡.♡.75
자바스크립트로 아래와 같이 연동하셔야 합니다.
<script language="javascript"> function new(){ window.open("test.asp","new", "width=300, height=200, left=30, top=30, scrollbars=no,titlebar=no,status=no,resizable=no,fullscreen=no"); } </script> <img src="이미지주소" onClick="new()" style="cursor:hand"/>
안녕하세요. 웹페이지를 만들다보면 이미지나 PDF등을 팝업으로 띄워야 하는 경우가 생깁니다.
이 때 Window.open을 이용해 팝업을 띄우는데, 이미지의 사이즈에 알맞게 팝업 크기를 제작하는 방법에 대해 이야기를 해볼까 합니다.
유동적으로 변해야지 보기에도 좋아보이니까요!
아래 소스는 PDF파일과 Image파일을 번갈아가면서 팝업으로 열 때를 위하여 제작한 코드입니다.
사용은 대부분 아래와 같은 방식으로 사용합니다.
title="open_popup('file_nm','2'); return false;" | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* 팝업 보기 */ function open_popup(file_nm,n){ /* PDF n==1 IMG n==2 */ if(n==1) { var url = "업로드주소" + file_nm; window.open(url, "_blank", "titlebars=no, status=no, menubar=no, resizable=no, toolbar=no, scrollbars=yes, width=900, height=640"); } else if (n==2) { var url = "업로드주소" + file_nm; var img=new Image(); img.src = url; /* 이미지의 사이즈 측정 */ var img_width=img.width; var win_width=img.width+25; var height=img.height+30; var OpenWindow=window.open('','_blank', 'width='+img_width+', height='+height+', menubars=no, scrollbars=auto'); OpenWindow.document.write("<img src='"+url+"' width='"+win_width+"'>"); } }; | cs |
이런 방식으로 코드를 짜서 사용을 하면 되고, 팝업의 크기는 사용자가 알맞게 셋팅해서 사용을 하면 됩니다.
1.자동 띄우기
<html> <head> <title>Auto</title> <script language="javascript"> <!-- function pop() { window.open("팝업창파일", "pop", "width=400,height=500,history=no,resizable=no,status=no,scrollbars=yes,menubar=no") } //--> </script> </head> <body onload="javascript:pop()"> 팝업창 띄우기 </body> </html>
2.팝업창 자동으로 닫기
<html> <head> <title>Close Window Timer</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="JavaScript"> <!-- function closeWin(thetime) { setTimeout("window.close()", thetime); //1000 은 1초를 의미합니다. } //--> </script> </head> <body onLoad="closeWin('5000')"> 이창은 5초후 자동으로 창이 닫힘니다.<br> </body> </html>
3.자동으로 지정된 크기로 브라우저 열기
<html> <head> <title>Designate popup</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language='JavaScript'> <!-- window.resizeTo(300,300); window.moveTo(0,0); //--> </script> </head> <body> <!--원하는 가로,세로의 크기를 입력해준다.--> </body> </html>
4.해상도에 맞추어 전체창으로 늘어남
<html> <head> <title>Resolution</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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>
5.이미지 클릭시 html문서없이 큰이미지로 새창띄우기
<html> <head> <title>Img popup</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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')" onOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''"> <img src=이미지파일" border="0"></a> </body> </html>
6.몇 초후 웹페이지 이동하기
<html> <head> <title>MT popup</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="JavaScript"> function nextWin() {location = "이동할 URL"} </script> </head> <body onload="setTimeout('nextWin()', 1000)"> <!--1000 이 1초 입니다.--> 바로 이동한 원하는 사이트로 이동함 </body> </html>
7.자동새로고침하기
<html> <head> <title>Refresh popup</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="JavaScript"> <!-- setTimeout("history.go(0);", 3000); // 1초는 1000 입니다. --> </script> </head> <body> 자동새로고침하기 </body> </html>