Modal Dialog

Modal Dialog からタイプされたデータを持ち帰ります。

320x240サイズでダイアログを開く

【Source Code】
<script type="text/javascript">
<!--
function mdlg()
{
  n = showModalDialog("dlg_2.html","dlg","dialogWidth:320px;dialogHeight:240px");
  alert("戻り値は:"+n);
}
// -->
</script>
</head>

<body>
<h2>Modal Dialog</h2>
<h3>Modal Dialog からタイプされたデータを持ち帰ります。</h3>

<a href="javascript:mdlg()">320x240サイズでダイアログを開く</a><br>

href="javascript:mdlg()" で mdlg 関数を呼び出します。
  <a href="javascript:mdlg()">320x240サイズでダイアログを開く</a><br>

mdlg 関数から dlg_2.html を呼び出し、タイプされたデータを n に取得します。
"dialogWidth:320px;dialogHeight:240px" で Dialog のサイズを設定します。
取得した戻り値を alert で確認します。
<script type="text/javascript">
<!--
function mdlg()
{
  n = showModalDialog("dlg_2.html","dlg","dialogWidth:320px;dialogHeight:240px");
  alert("戻り値は:"+n);
}
// -->
</script>

呼び出される dlg_2.html です。
form の "text" からデータをタイプ入力します。(初期値 999)
"閉じる" ボタンをクリックすると func 関数が呼び出されます。
func では returnValue にデータを設定して close() で閉じます。
【dlg_2.html Source Code】
<html>
<head>
<title>Dialog</title>
<script type="text/javascript">
<!--
function func(str)
{
  returnValue = str;
  close();
}
// -->
</script> 
</head>

<body>
<h3>ModalDialog</h3>
<form>
渡す値<input type="text" name="para" value="999"><br>
<input type="button" value="閉じる" onClick="func(this.form.para.value)">
</form);

</body>
</html>

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)