Toolkit」)で提供されるコントロールの1つで、ASP.NETページ上からポップアップ可能なモーダル・ウィンドウを生成する。モーダル・ウィンドウとは、そのウィンドウを表示している間は呼び出し元のウィンドウが非アクティブとなり、一切の操作を受け付けなくなるウィンドウのこと。ウィンドウを表示している間、エンド・ユーザーに対してほかの操作をさせたくない場合には、このモーダル・ウィンドウを利用すると便利だ(ちなみに、こうした制限を持たないウィンドウのことを「モードレス・ウィンドウ」と呼ぶ)。本稿では、このModalPopupコントロールを利用して、以下の画面のようなユーザー入力を受け付けるモーダル・ウィンドウと、その入力結果を呼び出し元の画面に反映させるためのサンプル・アプリケーションを作成してみよう。[ポップアップ]ボタンをクリックすると、モーダル・ウィンドウを表示この間、呼び出し元のページはグレーアウトし、一切の操作ができなくなる。[決定]ボタンをクリックすると、入力内容に基づいてあいさつメッセージを表示それではさっそく、具体的な作成の手順を見ていく。Toolkitを利用可能な状態にしておく必要がある。新規のWebフォームを作成する新規のWebフォーム(ModalPopup.aspx)を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。Webフォーム(ModalPopup.aspx)のフォーム・レイアウト新規Webフォームを作成しているところ。btnCancelModalPopupコントロールのTargetControlIDプロパティは、モーダル・ウィンドウの機能を追加する対象のコントロールを指定するものだ。ここでは“btnPopup”を設定しているので、ButtonコントロールbtnPopupをクリックすることで、ModalPopupコントロールによるモーダル・ウィンドウが起動するようになるわけだ。ModalPopupコントロールのそのほかのプロパティを設定する場合、(ModalPopupコントロールではなく)関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、ButtonコントロールbtnPopupのプロパティ・ウィンドウに「modal(ModalPopupExtender)」のような項目が追加されているので、この項目配下から個々の値を設定することができる。ModalPopupコントロールで利用可能な主なプロパティは以下のとおり。モーダル・ウィンドウの表示位置(ウィンドウ左上のX座標。モーダル・ウィンドウの表示位置(ウィンドウ左上のY座標。デフォルトは中心)ModalPopupコントロールで利用可能な主なプロパティ多くのプロパティが用意されているが、モーダル・ウィンドウを表示するうえで最低限設定が必要なのは、モーダル・ウィンドウとして利用するコントロールを表すPopupControlIDプロパティ、ウィンドウ上で[OK]ボタンの役割を割り当てるOkControlIDプロパティだ。ここでは[OK]ボタン(サンプルでは[決定]ボタン)に、クリック時に実行されるクライアント側関数として“onOk”を指定しておこう(具体的なコードは後述)。[キャンセル]ボタンクリック時に実行されるスクリプトをOnCancelScriptプロパティで指定することも可能であるが、本サンプルでは省略する(省略時、[キャンセル]ボタンはモーダル・ウィンドウのクローズのみを行う)。Toolkitで提供されているサンプル・アプリケーションに含まれている.cssファイルで定義されているクラスだ。Toolkitを利用するには?」でも紹介しているので、併せてご参照いただきたい。以上、画面の外観にかかわる設定は完了だ。2005によって自動生成されたコードを引用しておく。BackColor="#C0C0FF"><p>あなたの名前を入力してください。2005によって自動生成されたコードを引用したもの。<%--〜--%>は筆者によるコメント。[決定]ボタンクリック時に実行されるJavaScript関数を記述する最後に、手順1でOnOkScriptプロパティに指定したJavaScript関数OnOkを記述しておこう。具体的なコードは、以下のとおり。AJAXで提供されるユーティリティ関数の1つで、document.getElementByIdメソッドのエイリアスを表す。ここでは、TextBoxコントロールtxtNameの値を基に「こんにちは、●○さん!」という文字列を生成し、<div>タグ(ID="result")に対してセットしているというわけだ。シンプルなコードではあるが、$get関数を利用することで、標準のDOMメソッドであるdocument.getElementByIdメソッドを利用するよりもスマートにコードが記述できることがお分かりになるはずだ。以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、[ポップアップ]ボタンをクリックしたらモーダル・ウィンドウが立ち上がること、また[決定]ボタンをクリックすることでテキストボックスへの入力値が元のページに反映されることを、それぞれ確認してほしい。より自動抽出したものです。7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。TranslatorはPowerPoint用のアドイン。