[Javascript] 팝업 열기 및 크기 조절

안녕하세요. 이번 포스팅에서는 자바스크립트로 팝업 여는 방법을 알아보겠습니다.

 

아래 예제를 통해 2가지 방식(GET, POST)을 알아보겠습니다.

 

1. POST 방식으로 팝업 열기

function openPopup(){
  var url    ="url.do";
  var title  = "popup";

  var status = "toolbar=no,scrollbars=no,resizable=yes,status=no,menubar=no,width=260, height=120, top=0,left=0"; 
  window.open("", title,status); 		//window.open(url,title,status); window.open 함수에 url을 앞에와 같이
                                       //인수로  넣어도 동작에는 지장이 없으나 form.action에서 적용하므로 생략
  var frm = document.forms[0];                //가능합니다.
  frm.target = title;                    		//form.target 이 부분이 빠지면 form값 전송이 되지 않습니다. 
  frm.action = url;                    		//form.action 이 부분이 빠지면 action값을 찾지 못해서 제대로 된 팝업이 뜨질 않습니다.
  frm.method = "post";
  frm.submit();  
  frm.target="";
}

위의 소스처럼 팝업을 열면 POST 방식으로 form안에 있는 요소들이 전송됩니다.

 

2. GET 방식으로 팝업 열기

function openPopup(){
  var url = "url?arg1="+arg1+"&arg2="+arg2;		// arg1, arg2 변수를 get방식으로 전송
  var title = "popup";
  var status = "toolbar=no,scrollbars=no,resizable=yes,status=no,menubar=no,width=260, height=120, top=0,left=0"; 
  
  window.open(url,title,status); 			// 팝업 open
  }

위의 소스처럼 url에 변수들을 넣으면 GET 방식으로 해당 변수들이 전송됩니다.

 

 

3. window.open(string a, string b, string c) 옵션 알아보기

a :  url

b : 팝업의 제목(b 인자의 제목을 가진 팝업창이 있으면 그 팝업창에서 페이지 이동하고, 없으면 새로운 팝업창을 띄우는 기능)

c : 팝업의 설정변수입니다. 

- toolbar : 툴바 여부

- scrollbars : 스크롤바 여부

- resizable : 사이즈 조절 가능 여부

- status : 상태바 여부

- menubar : 메뉴바 여부

- width : 팝업 너비

- height : 팝업 높이

- top : 팝업 화면 위쪽에서의 위치를 지정

- left : 팝업 화면 왼쪽에서의 위치를 지정

 

 

 

4. 팝업 크기 조절하기

현재 띄운 팝업창의 사이즈를 조절하는 방법은 아래와 같습니다.

window.resizeTo(1400, 740);