이미지를 원본사이즈 팝업으로 띄우는 방
안녕하세요. 웹페이지를 만들다보면 이미지나 PDF등을 팝업으로 띄워야 하는 경우가 생깁니다.
이 때 Window.open을 이용해 팝업을 띄우는데, 이미지의 사이즈에 알맞게 팝업 크기를 제작하는 방법에 대해 이야기를 해볼까 합니다.
유동적으로 변해야지 보기에도 좋아보이니까요!
아래 소스는 PDF파일과 Image파일을 번갈아가면서 팝업으로 열 때를 위하여 제작한 코드입니다.
사용은 대부분 아래와 같은 방식으로 사용합니다.
1 | onclick="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 |
이런 방식으로 코드를 짜서 사용을 하면 되고, 팝업의 크기는 사용자가 알맞게 셋팅해서 사용을 하면 됩니다.
'개발자의 길 > WEB' 카테고리의 다른 글
| jQuery를 이용해 visibility 설정하기 (0) | 2019.05.27 |
|---|---|
| html window.open 파라미터 넘기는 2가지 방법 (0) | 2019.04.26 |
| 이미지를 원본사이즈 팝업으로 띄우는 방 (0) | 2019.04.24 |
| JSTL변수를 JavaScript에서 사용하는 방법 (0) | 2019.02.23 |
| 자바스크립트에서 숫자만 입력 가능하도록 하기 feat. 정규식 (0) | 2019.02.19 |
| RestController에 대해 알아보자 (0) | 2018.12.02 |
Tags