팝업창 해상도 상관없이 컨텐츠 너비/높이

 

팝업창 띄울시, 부모창에서 width, height를 지정하지 않고 자식창의 너비/높이에 따라 자동 조정되도록 함

 

요소 너비/높이 속성 (모두 Margin 요소 미포함)

offsetWidth : 요소의 전체 너비 사용 ( Boarder 까지 요소의 너비/높이 + 스크롤바 ) clientWidth : 스크롤바를 제외한, 요소의 내부 너비 ( Padding 까지의 요소의 너비/높이 - 스크롤바 제외 ) scrollWidth : 스크롤바를 포함한 요소 내부 너비 ( Padding 까지의 요소의 너비/높이 + 스크롤바 포함 ) width : 요소의 순수한 크기 (content width) innerWidth : width + padding outerWidth : width + padding + border

---

부모창 : width와 height 값이 있어야 _blank가 먹히므로 아무숫자입력

$("#chatPopUpBtn").click(function() {
    window.open('url', '_blank', 'width=1, height=1');
});

자식창 : (body 의 padding + border + 메인 컨텐츠의 outerWidth) 로 resizeTo

 

※ window.resizeTo : 윈도우 크기를 변화 시킴

$(document).ready(function() {

        // 팝업 창 크기를 HTML 크기에 맞추어 자동으로 크기를 조정하는 함수.
        var strDocumentWidth = $(document).outerWidth();
        var strDocumentHeight = $(document).outerHeight();
        window.resizeTo ( strDocumentWidth, strDocumentHeight );

        var strMenuWidth = strDocumentWidth - $(window).width();
        var strMenuHeight = strDocumentHeight - $(window).height();

        var strWidth = $('#content-sub').outerWidth() + strMenuWidth;
        var strHeight = $('#content-sub').outerHeight() + strMenuHeight + 300;

        //resize
        window.resizeTo( strWidth, strHeight );
});

 

 

 

---

출처 : https://reg1.tistory.com/14

내용에 맞게 팝업창 크기 조절