技術情報:JavaScript showModalDialog()

フォーム付きの画面を作っていて、
テキストボックスだけど手入力不可能にして例外処理を減らしたい場合、
ユーザーに選択肢を与えてそれを選ばせる方法が一般的。



その方法の一つとして、showModalDialog()を使うと
alert()やconfirm()のようなノリで
html(phpやpl、jspももちろんOK)をモーダル表示させることができる。



しかもちゃ〜んと親画面から子画面に引数を渡せるし
confirm()のように子画面で戻り値を設定して親画面から取得することもできる。





実践的で的確な情報が少なかったので自分なりに使う際のまとめを。



●呼び出す側(親画面)では以下のように記述。



returnValue = showModalDialog("",<子画面に渡す引数>,<表示オプション>)



・引数説明
1:URLはいわずもがな。
2:引数はオブジェクトや値を指定できる。
windowオブジェクトを渡せば親画面のJSオブジェクトも全て使えて便利。
3:表示オプションはwindow.open()そっくり。下記msdn参照のこと。



※2,3は省略可能。







●呼ばれる側(子画面)では以下のようになる
親画面の第2引数で渡された値は
window.dialogArgumentsでアクセス可能
(省略した場合はundefinedなので注意)



親画面に戻り値を渡したい場合は画面が閉じられる前に
window.returnValueに値を入れる。
入れなければshowModalDialog()の戻り値はundefinedとなる。



画面を閉じるときは普通にwindow.close()またはclose()で閉じる。
「Xボタン」で閉じられてもwindow.returnValueに値が入っていれば
ちゃんと戻り値が渡されるのでonloadあたりに代入処理を入れておくのもいいかも。





IEでの詳細な仕様は以下から
http://msdn.microsoft.com/ja-jp/library/cc428178.aspx



以前はIEでしか使えなかったけどFFも3になってから対応したみたい。
ブラウザ依存な関数って嫌う人いるけど、
CMSの管理側とか、普通はブラウザをIEに限定することが多いので、
そんな場合は進んで使ったほうが幸せになれそう。
これで例外処理との不毛な戦いが少し減らせる予感。