Hatena::ブログ(Diary)

アジャイルプログラマの日常 このページをアンテナに追加 RSSフィード

2007-11-07

ASP.NET でモーダルダイアログボックス

|  ASP.NET でモーダルダイアログボックスを含むブックマーク  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コントロールでモーダル・ウィンドウを生成するには?を参照してください。

まとめ

以上、 ASP.NET でモーダルウィンドウを使用する方法について見てきました。*2

*1:最近の Mozilla 系では、 window.open() のオプションでモーダルモードを指定可能ですが、古い WWW Browser でも動作する方法を紹介しました。

*2:このような記事を書いておいてなんですが、個人的な意見を言えば、 Web でモーダルウィンドウ (やポップアップウィンドウ) を作成しないことをおすすめします。 Web はもっとシンプルにしたいです。複雑なウィンドウ制御やユーザインタフェイスは、スマートクライアントとかに任せてさ……、 JavaScript でいろいろやろうとすると、すぐに複雑になってメンテナンスしにくすぎ……と、どんどん愚痴になっていきます :-p

Connection: close