小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


今さらながらJavaScriptのwindow.showModalDialogについて調べてみた。

JavaScript

はじめに

このエントリでは、モーダルダイアログを表現するJavaScriptのwindow.showModalDialogの基本的な使い方について書いています。

JavaScript本格入門　〜モダンスタイルによる基礎からAjax・ｊQueryまで
JavaScript本格入門　〜モダンスタイルによる基礎からAjax・ｊQueryまで
posted with amazlet at 11.04.27
山田 祥寛
技術評論社
売り上げランキング: 1320
Amazon.co.jp で詳細を見る

window.showModalDialogの使い方

window.showModalDialogメソッドの第１パラメタには、表示するファイルを指定します。第２パラメタには親ウインドウからモーダルダイアログに渡すオブジェクトを指定します。第３パラメタには、モーダルダイアログに対するオプションを指定します。第１パラメタ以外は、省略可能です。（ちなみにwindow.の部分も省略可能です。）

var returnValue = window.showModalDialog(url, Arguments, [options]);
または
var returnValue = showModalDialog(url, Arguments, [options]);
window.showModalDialogメソッドのオプショナル引数

window.openと似ていますが、微妙に名前が異なります。詳細は以下を参照してください。

モーダルダイアログからの戻り値

モーダルダイアログ側でwindow.returnValueプロパティに値をセットすると、親ウインドウ側でwindow.showModalDialogメソッドの戻り値としてその値が参照できます。

モーダルからの戻り値は、window.returnValueにセットします。すると呼び出し元にその値が渡されます。
モーダルダイアログの表示 はてなブックマーク - モーダルダイアログの表示

モーダルダイアログを開くサンプルプログラム

親ウインドウ側（showModalDialog.html）

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>モーダルダイアログを開くサンプル</title>
<script type="text/javascript" charset="UTF-8">
  onload = function() {
    var btn = document.getElementById("btnOpen");
    btn.onclick = function() {
      var url = "ModalDialog.html";
      var winWidth = "400px";
      var winHeight = "300px";
      var options = "dialogWidth=" + winWidth + ";dialogHeight=\
  " + winHeight + ";center=1;status=1;scroll=1;resizable=1;\
  minimize=0;maximize=0;";
      
      // ボタンをグレーアウトする
      btn.disabled = true;
      var returnValue = showModalDialog(url, window, options);
      // 戻り値をアラート
      alert(returnValue);
    }
  }
</script>
</head>
<body>
<h1>モーダルダイアログを開くサンプル</h1>
<input type="button" id="btnOpen" value="モーダルダイアログを開く"> 
</body>
</html>

モーダルダイアログ側（ModalDialog.html）

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>モーダルダイアログ</title>
<script type="text/javascript" charset="UTF-8">
  onload = function() {
    // 自分自身のウインドウを閉じる
    document.getElementById("btnClose").onclick = CloseDialog;
    onunload = CloseDialog;
    
    function CloseDialog() {
      // 親ウインドウを取得する(IE用)
      if(!opener) {
        opener = dialogArguments;
      }
      
      // 親ウインドウのボタンのグレーアウトを解除する
      opener.document.getElementById("btnOpen").disabled = false;
      returnValue = "hoge";
      close();
    }
  }
</script>
</head>
<body>
<h1>モーダルダイアログ</h1>
<input type="button" id="btnClose" value="自分自身のウインドウを閉じる">
</body>
</html>
モーダルダイアログから親ウインドウへアクセスする

モーダルダイアログから親ウインドウへアクセスする場合は、window.showModalDialogメソッドの第２パラメタにwindowオブジェクトを渡します。そして、モーダルダイアログ側では、window.dialogArgumentsで親ウインドウのwindowオブジェクトを参照します。
ただし、IE以外のブラウザでは、window.openerプロパティに、あらかじめ親ウインドウのオブジェクトがセットされているようです。

各ブラウザの動作の違い

window.showModalDialogはIEでしか動作しないものだと思っていたのですが、IE以外のブラウザでも動作するようです。（ただし、Google Chrome3、Opera10では動作しません。）

IE7、Safari4では、問題なく動作します。
Firefox3では、ボタンをクリックをして、モーダルダイアログが開くまでの間にボタンを複数回クリックすると、モーダルダイアログが複数回表示されてしまいます。これを回避するため、サンプルプログラムではボタンをグレーアウトするようにしています。
Google Chrome3では、ダイアログは表示されますが、親ウインドウの操作ができてしまいます。Opera10では、そもそもwindow.showModalDialogメソッドが動作しませんでした。

関連エントリ