이미지를 원본사이즈 팝업으로 띄우는 방

Posted by 돼지로운생활
2019.04.24 20:13 개발자의 길/WEB

안녕하세요. 웹페이지를 만들다보면 이미지나 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


이런 방식으로 코드를 짜서 사용을 하면 되고, 팝업의 크기는 사용자가 알맞게 셋팅해서 사용을 하면 됩니다. 



유용한 IT정보 / 전자제품 리뷰
포털에서 MilkyeWay를 검색해주세요👍
유용한 정보였다면 ❤️ 클릭 부탁드려요 😄

이 댓글을 비밀 댓글로