`window.showModalDialog`を使う上での注意点

window.showModalDialogはモーダルウィンドウを開くためのメソッドです。
2016年11月現在、Chromeでは廃止され、Firefox50では使えますが非推奨です。
Firefoxでもそのうち廃止する予定だそうです。
https://developer.mozilla.org/ja/docs/Web/API/Window/showModalDialog

window.showModalDialogを使っている機能で、結構不具合がありましたので、
window.showModalDialogを使う上での注意点を挙げていきます。
ちなみに、今のところ全てIEです。

そもそもwindow.showModalDialog使わなければいいんですが、代替方法とか考えると、これまた不具合が出そうでして。。。

モーダルウィンドウ上でsubmit

IE11では、 モーダルウィンドウ上でsubmitすると、別ウィンドウが開かれてしまいます。
Firefox50では起こりませんでした。

form要素のtarget属性値と、window.nameを一致させれば、別ウィンドウは開きません。
form要素のtarget属性は、submit後の開き方を指定する属性です。

modal.html

<form method="POST" action="/sample" target="modalWindow">

modal.js

window.name="modalWindow";

http://hotmemin.com/blog/?p=615
http://html5.cyberlab.info/elements/forms/form-target.html

親ウィンドウへのアクセス

IE11では、モーダルウィンドウ内から親ウィンドウへのアクセスが、window.openerでできません。
Firefox50ではwindow.openerでアクセスできました。
モーダルウィンドウにwindowオブジェクトを渡せば、window.dialogArgumentsでアクセスできます。

parent.js

window.showModalDialog("modal.html", window, "");

modal.js

var parent = window.opener ||  window.dialogArguments;

http://d.hatena.ne.jp/replication/20100117/1263694945
http://d.hatena.ne.jp/sngmr/20080729/1217319827

optionsのdialogWidth,dialogHeightには単位が必要(IE11)

以下のコードを実行すると、Firefox50では200pxのウィンドウ幅で開かれますが、IE11では画面幅最大で開かれます。

parent.js

window.showModalDialog("modal.html", window, "dialogWidth=200");

下記のように長さの単位を付ける必要があります。

parent.js

window.showModalDialog("modal.html", window, "dialogWidth=200px");

optionsのdialogHide,edge, status, unadornedはIE専用

下記サイトを参考にしてください。
http://help.dottoro.com/ljdlgxbu.php

IE8ではウィンドウをキャッシュしている

IE8ではwindow.showModalDialogで複数回ウィンドウを開いたとき、正しく動きませんでした。調べてみたら、2回ウィンドウを開いたとき、JSPの初期処理が実行されていません!
そう、キャッシュされていました。

キャッシュさせないよう、URLにランダム値を付与するか、metaタグでキャッシュしないよう指定すれば、解決できます。

Seleniumで操作できない

テスト自動化できません。
対応方法は、window.showModalDialog=window.openを実行して、モードレスウィンドウに強制的に変更することです。

https://github.com/seleniumhq/selenium-google-code-issue-archive/issues/284
http://stackoverflow.com/questions/4304886/webdriver-showmodaldialog