showModalDialog()로 창을 띄우면서 값을 전달하여 dialogArguments로 그 값을 받아보고 띄워진 창에서 returnValue 로 부모창에 다시 전달해서 값을 표시하는 것을 구현해 보았다.
▣ showModalDialog.html
<html>
<head>
<title>showModalDialog</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 fnModalDialog()
{
var sFeatures = "dialogWidth:300px; dialogHeight:100px; dialogLeft:100px; dialogTop:100px; center;no; status:no; scroll:no";
var returns = window.showModalDialog("dialogArguments.html", arguments, sFeatures)
if( returns != null)
{
txt_view.value = returns[0] + ", " + returns[1];
}
}
</script>
</head>
<body>
<table width="300" height="100" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#E0E0E0" bordercolordark="#FFFFFF">
<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="Call showModalDialog" onclick="fnModalDialog('Argument 1', 'Argument 2')">
</td>
</tr>
</table>
</body>
</html>
▣ dialogArguments.html
<html>
<head>
<title>dialogArguments</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
body, td {
font-family:verdana;
font-size:12px;
}
</style>
<script for="window" event="onload">
var v_args = window.dialogArguments;
txt_view.value = v_args[0] + ", " + v_args[1];
</script>
<script for="document" event="onkeydown">
if(event.keyCode == 13 || event.keyCode == 27)
{
winClose();
}
</script>
<script>
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 Arguments : <input type="text" name="txt_view" onclick="this.value=''">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="Go to parent" onclick="winClose()">
</td>
</tr>
</table>
</body>
</html>
▣ 페이지 로드
부모창의 역활을 하게 될 showModalDialog이다.
▣ 모달창
부모창에서 버튼을 클릭하면 위와 같은 모달창이 열린다. 부모창에서 던진 파라미터가 텍스트박스에 표시된다.
▣ 부모창
모달창에서 Go to parent 버튼을 클릭하면 닫히면서 부모창에 값을 던지고 부모창 텍스트박스에 표시된다.
728x90
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] 모달창에서 부모창의 함수호출 (0) | 2023.02.28 |
|---|---|
| [JavaScript] 정규표현식 입력검증 (0) | 2023.02.28 |
| [JavaScript] 동적으로 테이블 생성 (0) | 2023.02.28 |
| [JavaScript] 이벤트 핸들러 [2] (1) | 2023.02.28 |
| [JavaScript] 이벤트 핸들러 [1] (0) | 2023.02.28 |
댓글