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

안녕하세요. 웹페이지를 만들다보면 이미지나 PDF등을 팝업으로 띄워야 하는 경우가 생깁니다.

이 때 Window.open을 이용해 팝업을 띄우는데, 이미지의 사이즈에 알맞게 팝업 크기를 제작하는 방법에 대해 이야기를 해볼까 합니다.

유동적으로 변해야지 보기에도 좋아보이니까요!

아래 소스는 PDF파일과 Image파일을 번갈아가면서 팝업으로 열 때를 위하여 제작한 코드입니다.

사용은 대부분 아래와 같은 방식으로 사용합니다.

1
onclick="open_popup('file_nm','2'); return false;" 
cs

/* 팝업 보기 */
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+"'>");
    }
};