ASP.NET でモーダルダイアログボックス
概要
ASP.NET でモーダルダイアログを実現するには、以下の 3 通りの方法があります。
- JavaScript の showModalDialog() を使用
- JavaScript の window.open() を使用してフォーカスを常に取得
- Ajax Control Toolkit の ModalPopupExtender コントロールを使用
showModalDialog() を使用する方法
showModalDialog() は、その名の通りモーダルダイアログを表示するための JavaScript 関数です。基本的にはこの関数を呼び出すだけでモーダルダイアログを表示することができます。ただし ASP.NET を使用している場合、 2 つの不可思議な挙動が発生します。
1 つめの問題は、モーダルウィンドウ内のリンクをクリックすると、別のウィンドウが新たに開いてしまうことです。この問題を回避するには、 head 要素に「base target="_self"」を追加します。サンプルを以下に示します。「base target="_self"」以外に frame や iframe を使用する回避方法もありますが、 base 要素を追加するのが一番シンプルだと思います。
<base target="_self" />
2 つめの問題は、モーダルウィンドウの Page_Load() が呼ばれない場合があるということです。モーダルとして開いた 1 度目は Page_Load() が呼ばれますが、開いているウィンドウを閉じて再度モーダルウィンドウを開くと Page_Load() が呼ばれません。この問題を回避するには、モーダルウィンドウに毎回異なる QueryString を渡してアドレスを変えるという方法がありますが、根本的な解決には至っていません。
window.open() を使用する方法
window.open() は、新しいウィンドウをモードレスで開きます。この JavaScript 関数でモーダルダイアログを実現するには、モーダルウィンドウ側の aspx に以下のような仕掛けが必要になります。
<body onblur="this.window.focus();">
これによって、新しく開いたウィンドウを擬似的にモーダルとして扱うことができます。 *1
ModalPopupExtender コントロールを使用する方法
Ajax Control Toolkit の ModalPopupExtender コントロールを使用すると、 Panel などをモーダルウィンドウとして扱うことができます。詳細は、ModalPopupコントロールでモーダル・ウィンドウを生成するには？を参照してください。
*1:最近の Mozilla 系では、 window.open() のオプションでモーダルモードを指定可能ですが、古い WWW Browser でも動作する方法を紹介しました。
*2:このような記事を書いておいてなんですが、個人的な意見を言えば、 Web でモーダルウィンドウ (やポップアップウィンドウ) を作成しないことをおすすめします。 Web はもっとシンプルにしたいです。複雑なウィンドウ制御やユーザインタフェイスは、スマートクライアントとかに任せてさ……、 JavaScript でいろいろやろうとすると、すぐに複雑になってメンテナンスしにくすぎ……と、どんどん愚痴になっていきます :-p
