JavaScript Madal 팝업창

팝업창을 사용하는 방법은 일반적으로 window.open 이 있다.

 

하지만 필요에 따라 팝업창의 작업이 완료되지 않으면 다음 작업이 진행되지 않아야할 필요성이 생긴다.

대표적인 예로 파일업로드가 있다. 어떤 특정 데이터를 입력하는데 있어 파일업로드가 별도의 단계가 필요할 경우 해당 팝업창이 닫히지 않고 계속 유지될 경우 오류 발생의 여지가 생긴다.

 

이를 해결하기 위해 사용하는 것이 modal 모듈이다.

해당 모듈을 사용하면 부모창의 모든 제어권을 팝업창이 가져가게 되며 부모창은 아무런 액션을 취할 수 없다.

 

사용방법은 다음과 같다.

 

window.showMoalDialog("호출URL", arguments, "옵션");

보면 알겠지만 window.open 과 크게 차이가 없다.

그러나 이 2번째 arguments 와 3번째 "옵션"을 보면 차이가 발생한다.

 

2번째 arguments 의 경우 부모창의 인자를 자식창에 전달하여 직접 컨틀롤 할 수 있게한다.

사용방법은 다음과 같다.

/* 보모창에서 modal 사용 */

window.showModalDialog(URL, window, "dialogWidth:600px;dialogHeight:600px;status:no;help:no");

 

/* 자식창에서 부모창의 인자사용 */

var win = window.dialogArguments; // 부모창에서 보내온 arguments 에 접근

var aaa = win.document.dataForm; // 부모창의 dataForm을 직접 사용

 

 

3번째 옵션은

- dialogHeight : 팝업창의 높이(pixel)

- dialogWeight : 팝업창의 너비(Pixel)

- dialogLeft : 좌측 상단의 x 좌표

- dialogTop : 좌측 상단의 y좌표

- center : 중앙위치설정(yes/no)

- help : Help 아이콘 표시여부(yes/no)

- scroll : 스크롤바 표시여부(yes/no)

- resizable : 크기조절 가능여부(yes/no)

- status : 상태표시줄 표시여부(yes/no)

출처: http://blog.daum.net/wiznel/4653838