모달 팝업을 사용하는 이유
1. 팝업 띄워놓고 부모창에서 딴 짓을 못하도록 하기 위해서
2. 속도가 빠르다고 하니
3. 열린 창 중에서 항상 위에 보이게 되니까
이 정도 인것 같다.
모달 팝업의 종류가 또 나뉘게 되는데
showModalDialog();
showModelessDialog();
showModalDialog
메시지 박스와 똑같다.
팝업이 열려 있는 동안 부모창은 먹통..
showModelessDialog
일반 팝업과 같지만, 항상 위 에 보여 지게 된다.
일반 팝업은 부모창을 누르게 되면 부모창 뒤로 숨겨지게 되지만
이건 무조건 항상 위에 표시가 된다.
Syntax : 반환값 = window.showModelessDialog(sUrl, [인자1], [설정])
Parameters :
sURL : 창을 띄울 주소를 말합니다.
인자1 : 창을 띄우는 창의 개체를 말하며, 일반적으로 새창을 띄울 경우 window(현재 창의개체명)을 사용합니다.
그러면 부모창의 내용을 일반적인 형태로 승계받습니다.
설정 : 창의 모양을 결정하는 옵션
dialogHeight:xx
창의 높이(픽셀단위)
dialogWidth:xx
창의 넓이(픽셀단위)
dialogLeft:xx
창의 왼쪽 위치(픽셀단위)
dialogTop:xx
창의 위쪽 위치(픽셀단위)
center:{yes | no | 1 | 0 | on | off }
창이 Desktop(창이 아님)의 중간에 위치할 것인가를 결정.
기본값은 yes
dialogHide: { yes | no | 1 | 0 | on | off }
창이 보여질 것인가를 결정.
기본값은 no
egde: { sunken | raised }
창 틀의 두께를 의미하며, sunken이 두텁고, raised가 얇음.
기본값은 raised
help: { yes | no | 1 | 0 | on | off }
도움말 아이콘(물음표)을 표시할 것인가 결정
기본값은 yes
resizable: { yes | no | 1 | 0 | on | off }
창 크기 조절이 가능한지 여부를 결정
기본값은 no
scroll: { yes | no | 1 | 0 | on | off }
스크롤바의 표시 여부.
기본값은 yes
status: { yes | no | 1 | 0 | on | off }
창 하단의 상태바를 표시할 것인가를 결정
기본값은 no
unadorned: { yes | no | 1 | 0 | on | off }
본인의 실력으로는 알 수 없음. 부모창과 자식창간의 제어와 관련된 개체인것 같은데....모르겠음..끙..
반환값
showModelessDialog 또는 showModelDialog 로 오픈시킨 창에서
returnValue라는 변수에 어떠한 값을 넣어줌으로써 자식창이 닫힐 때 부모창으로 값을 넘겨줄 수 있습니다
예시) JavaScript
부모창
var nTest = window.showModalDialog("dialog.html",self,"help=no; scroll=no; dialogWidth=350px; dialogHeight:300px; center:yes");
자식창
window.returnValue = "1111";
window.close();
파라미터
부모창
var args = new Array();
args[0] = "차문환"
args[1] = "테스트"
var retval = window.showModalDialog("dialog.html", args, "dialogWidth=800px; dialogHeight=900px; center:yes; status:no; scroll:no;resizable:yes; help:no");
자식창
var args = window.dialogArguments;
alert(args[0]);
alert(args[1]);
부모창의 함수 호출
부모창
Function aaa()
{
return "차문환"
}
자식창
var tempName = dialogArguments;
alert(tempName.aaa());
※ 부모 페이지에서 window.showModalDialog 로 팝업을 만들었을 경우 유효함.
window.showModalDialog("dialog.html",self,"help=no; scroll=no; dialogWidth=350px; dialogHeight:300px; center:yes");
반드시 인자값은 self 나 window 여야 한다.
