상세 컨텐츠

본문 제목

[JavaScript] 팝업창 크기 자동 조절 메서드

Development/JavaScript

by J-Developer 2022. 5. 31. 16:12

본문

반응형

팝업 창 크기를 HTML 크기에 맞추어 자동으로 크기를 조정하는 함수로 팝업 스크립트에 해당 메서드를 넣으면 된다.

예시 코드는 jQuery로 작성되어 있지만 JavaScript로 변경해서 사용해도 된다.

$(window).load(function() {

    var strWidth;
    var strHeight;

    if ( window.innerWidth && window.innerHeight && window.outerWidth && window.outerHeight ) {
        strWidth = $('#contents').outerWidth() + (window.outerWidth - window.innerWidth);
        strHeight = $('#contents').outerHeight() + (window.outerHeight - window.innerHeight);
    }

    else {
        var strDocumentWidth = $(document).outerWidth();
        var strDocumentHeight = $(document).outerHeight();
        window.resizeTo ( strDocumentWidth, strDocumentHeight );

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

        strWidth = $('#contents').outerWidth() + strMenuWidth;
        strHeight = $('#contents').outerHeight() + strMenuHeight;
    }

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

});
반응형

관련글 더보기

댓글 영역