웹을 하다보면 자주 쓰이는 자바스크립트 메소드가 아닐까 생각한다.
사용법이야 간단하지만 자주 까먹는 관계로 일단 포스팅~ ^^;;
showModalDialog는 지정한 HTML 문서를 표시하기 위한 대화창을 출력하는데 사용한다.
이때 window.showModalDialog와 window.open이 비교가 되는데 차이점은 다음과 같다.
1. showModalDialog는 자식창을 닫지 않는 이상 부모창을 선택할 수 없다.
2. showModalDialog는 자식창이 호출될때 부모창에서 자식창으로 변수값을 넘겨줄수 있다.
이렇게 두개만 기억하면 될 것 같다.
문법은 다음과 같다.
vRtn = window.showModalDialog(sURL, [, vArguments] [, sFeatures]);
위와 같이 사용하고, [ ]안의 내용들은 옵션이기 때문에 써도 되고 안써도 된다.
sURL : 주소
vArguments : 자식창이 호출될때 부모창에서 넘겨주는 변수들로 객체배열로 넘긴다.
sFeatures : 창설정
이론은 이정도로 대충 정리하고, 소스를 확인해 보자.
== index.html ==
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function openDialog(){
var ret;
var args = new Array();
args["test1"] = "1111";
args["test2"] = "2222";
ret = showModalDialog("open.html", args,"dialogHeight=420px; dialogWidth=300px; scroll=no; status=yes; help=no; center=yes");
}
</script>
</HEAD>
<BODY>
<form>
<input type="button" value="click" onclick="javascript:openDialog();">
</form>
</BODY>
</HTML>
== open.html ==
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%
String test1 = request.getParameter("test1");
%>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
var test1 = window.dialogArguments["test1"];
var test2 = window.dialogArguments["test2"];
alert(test1+"\t"+test2);
str = 'test1 : '+test1+'<br>';
str += 'test2 : '+test2;
document.write(str);
</script>
</HEAD>
<body>
<input type="button" value="close" onclick="javascript:self.close();">
</body>
</HTML>
소스를 보면 간단하게 이해가 되겠지만, 그마저도 귀찮은 이를 위해 스샷도 첨부한다.
1. index.html을 실행했을때의 스샷
2. click 버튼을 눌렸을때 open.html이 호출될때의 이미지
위와 같이 alert으로 넘겨준 값을 찍고 페이지에 표시해준다.
close버튼을 누를경우 창이 닫힌다.
