showModalDialog()로 창을 띄우고 띄워진 창에서 부모창의 함수를 호출하는 것과 returnValue 로 부모창에 다시 전달해서 값을 표시하는 것을 구현해 보았다.
▣ MainPage.html
<html>
<head>
<title>MainPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
body, td {
font-family:verdana;
font-size:12px;
}
</style>
<script type="text/javascript">
function fnShowModalDialog() {
var sFeatures = "dialogWidth:300px; dialogHeight:100px; dialogLeft:100px; dialogTop:100px; center;no; status:no; scroll:no";
var returns = window.showModalDialog("ModalDialog.html", window, sFeatures)
if( returns != null) {
txt_view.value = returns[0] + ", " + returns[1];
}
}
function fnModalCallBack(v_name) {
txt_call.value = v_name + ", Modal Call...";
}
</script>
</head>
<body>
<table width="300" height="100" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#E0E0E0" bordercolordark="#FFFFFF">
<tr>
<td align="center">
Modal Call : <input type="text" name="txt_call" onclick="this.value=''">
</td>
</tr>
<tr>
<td align="center">
Return Value : <input type="text" name="txt_view" onclick="this.value=''">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Show ModalDialog" onclick="fnShowModalDialog()">
</td>
</tr>
</table>
</body>
</html>
▣ ModalDialog.html
<html>
<head>
<title>ModalDialog</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
body, td {
font-family:verdana;
font-size:12px;
}
</style>
<script type="text/javascript">
function parentCall() {
dialogArguments.fnModalCallBack(txt_name.value);
}
function winClose() {
var v_returns = new Array();
v_returns[0] = "Return 0";
v_returns[1] = "Return 1";
window.returnValue = v_returns;
window.close();
}
</script>
</head>
<body leftmargin='0' topmargin='0'>
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#E0E0E0" bordercolordark="#FFFFFF">
<tr>
<td align="center">
Dialog Name : <input type="text" name="txt_name" value="agapeuni">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Parent Call" onclick="parentCall()">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Go to parent" onclick="winClose()">
</td>
</tr>
</table>
</body>
</html>
▣ 페이지 로드
부모창에서 Call showModalDialog를 클릭해서 모달창을 연다.
▣ 부모창 호출
모달창에서 Parent Call 버튼을 클릭하여 부모창의 함수를 호출한다. 부모창의 Modal Call 텍스트박스에 표시가 된다.
▣ 짜잔~~~! 부모창 값전달
모달창에서 Go to Parent 버튼을 클릭하면 부모창에 값을 전달하고 창이 닫힌다.
728x90
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] 테이블에 롤오버/클릭 효과 (0) | 2023.02.28 |
|---|---|
| [JavaScript] 이미지 업로드 하기전 표시하기 (ImageViewer ) (0) | 2023.02.28 |
| [JavaScript] 정규표현식 입력검증 (0) | 2023.02.28 |
| [JavaScript] 모달창에 값 주고 받기 (0) | 2023.02.28 |
| [JavaScript] 동적으로 테이블 생성 (0) | 2023.02.28 |
댓글