[팝업창]window.open 팝업창 크기 동일하게 맞추기

팝업창 크기 동일하게 맞추기

 

서브페이지 작업을 하다보면 팝업창을 띄워야 할 경우가 생깁니다.

레이어팝업으로 하면 깔끔하고 이쁘게 할 수 있겠지만...

 

개발자의 의견으로 레이어팝업으로 할 수 없고 꼭 새창으로 팝업을 띄워야 할 경우가 생기네요.

 

팝업창을 띄워는 방법은 window.open을 사용 하여 띄우는 방법을 사용 하고 있습니다.

(다른 방법이 있나 알아보지 않아서 모르겠네요..;;)

 

window.open 팝업창 띄우는 방법은 https://yeoninim.tistory.com/14 요기에 설명 되어 있습니다.

window.open() 팝업창 띄우기 두가지 방법

 

window.open을 이용하여 팝업창의 크기와 위치를 지정할 수 있습니다.

 

네 별로 어렵지 않은데..문제는 크로스브라우징 입니다.

실제로 작업한 홈페이지에서 문제가 발생했습니다. 

 

각각의 브라우저 별로 팝업창의 크기가 달라서 불필요한 스크롤이 생기는 경우가 생겼습니다.

특히 Opera 브라우저가 다른 브라우저에 비해 팝업창이 더 작게 나오는거 같습니다. 

 

이걸 CSS로 해결할 방법이 없더라구요..(제가 모르는것 일까요??)

 

검색하다가 우연히 발견한 어느 개발자 분의 글을 보고 따라해봤습니다.

브라우저별로 크기가 다른 이유와 해결 방법을 자세하게 설명 해 주셨네요..

정말 감사합니다.

 

자세한 내용을 알고 싶으시면 맨 아래 주소로 가서 확인 해 보세요.

저도 급하게 해결하느라 자세히 못봤는데..다시 보고 공부해야 겠습니다.

 

 

해결방법

저는 .userInfoPop 이(가) 팝업창의 크기를 지정한 class 입니다.

각자 본인이 정한 class나 id를 넣고 사용해보세요.

  $(document).ready(function() {
      // 팝업 창 크기를 HTML 크기에 맞추어 자동으로 크기를 조정하는 함수.
      var strWidth;
      var strHeight;

      //innerWidth / innerHeight / outerWidth / outerHeight 지원 브라우저 
      if ( window.innerWidth && window.innerHeight && window.outerWidth && window.outerHeight ) {
          strWidth = $('.userInfoPop').outerWidth() + (window.outerWidth - window.innerWidth);
          strHeight = $('.userInfoPop').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 = $('.userInfoPop').outerWidth() + strMenuWidth;
          strHeight = $('.userInfoPop').outerHeight() + strMenuHeight;
      }

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

  });

 

참고사이트 : https://blog.naver.com/afidev/20197202121

참고사이트 : https://sometimes-n.tistory.com/22