[JavaScript] モーダルダイアログを使う（window.showModalDialog） – コピペで使える JavaScript逆引きリファレンス

モーダルダイアログを使うには、window.showModalDialogを使用します。

※モーダルダイアログはセキュリティの観点から廃止の方向に向かってますので、使用は非推奨です。

サンプルソース

例）親画面（main.html）から子画面（sub.html）をモーダル画面として開く

<html lang="ja">
<head>
<meta charset="utf-8">
<title>親画面サンプル</title>
<script>
function showdialog(){
  var win = window.showModalDialog(
    'sub.html',          //表示するページのURL
    this,                //引き渡すオブジェクト
    'dialogWidth=600px;dialogHeight=500px;resizable=no;scroll=yes'  //オプション
  );
}
</script>
</head>
<body>
  <form name="fm1" >
    <input type="text" id="oyaTxt1" value="">
    <input type="button" value=" モーダルダイアログを開く " onclick="showdialog();">
  </form>
</body>
</html>

<head>

<title>親画面サンプル</title>

function showdialog(){

var win = window.showModalDialog(

'sub.html', //表示するページのURL

this, //引き渡すオブジェクト

'dialogWidth=600px;dialogHeight=500px;resizable=no;scroll=yes' //オプション

);

}

</script>

</head>

<body>

</form>

</body>

</html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>子画面サンプル</title>
<script>
function kakutei(){
  var oyaform = window.dialogArguments.document.fm1;   //親画面のフォームを取得する
  var koTxt = document.getElementById('koTxt1').value; //子画面の入力値を取得する
  oyaform['oyaTxt1'].value = koTxt;  //親画面に値をセット
  window.close();  //モーダル画面を閉じる
}
</script>
</head>
<body>
  <input type="text" id="koTxt1" value="hoge">
  <input type="button" value=" 確定 " onclick="kakutei();">
</body>
</html>

<head>

<title>子画面サンプル</title>

function kakutei(){

var oyaform = window.dialogArguments.document.fm1; //親画面のフォームを取得する

var koTxt = document.getElementById('koTxt1').value; //子画面の入力値を取得する

oyaform['oyaTxt1'].value = koTxt; //親画面に値をセット

window.close(); //モーダル画面を閉じる

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

↓ここに子画面で入力された値がセットされます。

※Chrome、Edge等では動きません。
（最新のブラウザではモーダルダイアログは廃止の方向に向かっています。）

解説

window.showModalDialogの引数には以下のもの指定します。

戻り値：ダイアログから呼び出し元へ返すデータが格納されたオブジェクト
第１引数：ダイアログに表示するページのURL　※必須
第２引数：ダイアログへ送るデータオブジェクト（変数名）　※省略可
第３引数：オプションパラメータ　※省略可

第１引数のURLは、http://～で始まる絶対パスでも、./hoge.htmlのような相対パスでもどちらでも指定できます。
第２引数に指定したオブジェクトをダイアログ側で参照できます。thisを指定しておけばダイアログからは呼出し元画面全てを参照できます。
第３引数のオプションパラメータはウィンドウのサイズや表示の仕方などをセミコロン区切りで指定できます。指定できるパラメータは下記表をご覧ください。

【showModalDialogオプション】
プロパティ	意味	設定値	既定値	設定例
dialogWidth	幅	数値	-	600px
dialogHeight	高さ	数値	-	500px
dialogTop	上位置	数値	-	50px
dialogLeft	左位置	数値	-	50px
center	画面中央に表示するかどうか	yes/no	yes	yes
resizable	リサイズの可/不可	yes/no	no	no
scroll	スクロールバーの表示/非表示	yes/no	no	no
maximize	最小化ボタンの表示/非表示	yes/no	no	yes
maximize	最大化ボタンの表示/非表示	yes/no	no	yes
status	ステータスバーの表示/非表示	yes/no	no	no

※ yes/no で指定する項目は、1(=yes)または0(=no)でも指定可能です。

第２引数にthisを指定して開いたダイアログは、window.dialogArgumentsで親ウィンドウを参照できます。ダイアログから親画面へ値を渡したい場合は、以下のように記述します。

//formを使用する場合
var obj = window.dialogArguments.document
                 .forms['＜親画面のform名＞'].＜テキストボックス等のname＞;
obj.value = '＜セットしたい値＞';

//getElmentByIdを使用する場合
var obj = window.dialogArguments.document
                  .getElementById('＜親画面のテキストボックス等のID＞');
obj.value = '＜セットしたい値＞';

//formを使用する場合

var obj = window.dialogArguments.document

.forms['＜親画面のform名＞'].＜テキストボックス等のname＞;

obj.value = '＜セットしたい値＞';

//getElmentByIdを使用する場合

var obj = window.dialogArguments.document

.getElementById('＜親画面のテキストボックス等のID＞');

obj.value = '＜セットしたい値＞';

ダイアログを閉じたい場合は、window.close(); で閉じることができます。

その他メモ

showModalDialogはセキュリティの観点から問題が多く、GoogleChromeやSafari、Edge等のブラウザではデフォルトでは使用できなくなっています。これからは使わない方が良いでしょう。