このサンプルはModalPopupExtenderと処理中の状況を示すgif画像を組み合わせた、処理中パネルを作成します。
以下のボタンを押下すると3秒間Popupパネルが表示され自動的にクローズされます。
ASP.NET2.0AJAXを利用しているとUpdateProgressを用いる事が多いかもしれませんが、クライアントの処理でも同様の振る舞いを実装したい時があります。
私の場合、このパネルをサーバとの通信中やクライアント側での処理中で且つクライアント側で操作されたくない場合に表示しました。
実装方法ですが、非常に簡単です。
処理中を示すパネルとModalPopupExtenderを作成するだけです。（以下）
モーダルパネル定義
<asp:Panel ID="LoadingPanel" runat="server">
<div id = "LoadingPanelMain" class="LoadingPanel">
<img src="../../img/indicator_circle_ball.gif" />
<div id = "LoadingPanelText"></div>
</div>
</asp:Panel>
ModalPopupExtender定義
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="btnDummy"・・・①
PopupControlID="LoadingPanel"
DropShadow="true"
BehaviorID ="LoadingPanelBehaviour"・・・②
BackgroundCssClass="modalBackground"
>
</cc1:ModalPopupExtender>
上記設定の①でダイアログ起動時のトリガーとなるコントロール定義(TargetControlID)をbtnDummyにしています。
通常はTargetControlIDにダイアログ起動時のトリガーとなるコントロール（ボタン等）を定義しますが、複数のボタンにより同一のパネルをOpenしたい場合などでは対応できません。
このようにダミーのコントロールを定義し、ダイアログのOpenにはScriptを叩くようにすれば必要な時にダイアログをOpenできます。
尚、このbtnDummy（ボタン）はStyle="display: none"を設定する事により画面上は非表示とし、スクリプトにより明示的にダイアログのOpenを実施するようにしています。
次に②のBehaviorIDですが、サーバサイドにてModalPopupExtenderを認識する場合にはIDの"ModalPopupExtender1"よりインスタンスを認識できますが、クライアントサイドでは方法が異なります。
クライアントサイドでは、「var behavior = $find('LoadingPanelBehaviour');」によりインスタンスを取得する事ができます。
クライアントでのModalPopupExtenderのインスタンスはダイアログのOpen，Close処理にて利用します。
以下、JavaScriptのソースです。
ModaPopupPanelを制御するJavaScriptコード(LoadingPanel.js)
var LoadingPanel = "";
$addHandler(window, 'load', function(){
LoadingPanel = $create(CodeSample.LoadingPanel, {}, null, null, null);
});
Type.registerNamespace("CodeSample");
CodeSample.LoadingPanel = function(){
CodeSample.LoadingPanel.initializeBase(this);
this._textElm = ""; //表示テキスト部のエレメント
this._panelbehavior =""; //ModalPopupExtender
}
CodeSample.LoadingPanel.prototype ={
initialize:function() {
CodeSample.LoadingPanel.callBaseMethod(this,'initialize');
this._panelbehavior=$find("LoadingPanelBehaviour");
this._textElm=$get("LoadingPanelText");
this.setText("Loading Now...");//Default Text
},
//パネルの表示テキストの設定
setText:function(txt){
this._textElm.innerText=txt;
},
//パネルの表示処理
openPanel :function(){
this._getPanelBehavior().show();
},
//パネルのClose処理
closePanel :function(){
this._getPanelBehavior().hide();
},
_getPanelBehavior : function(){
if(this._panelbehavior==null){
this._panelbehavior=$find("LoadingPanelBehaviour");
}
return this._panelbehavior;
},
//３秒間パネルを開いて、その後閉じる。
openThreeSecond : function(){
this.openPanel();
var handler = Function.createDelegate(this, this.closePanel);
this._wait(handler,3000);
},
_wait:function(func,waitTime){
var f = function(){
func();
};
setTimeout(f,waitTime);
},
dispose: function() {
CodeSample.LoadingPanel.callBaseMethod(this, 'dispose');
}
}
CodeSample.LoadingPanel.registerClass('CodeSample.LoadingPanel', Sys.Component);
if (typeof(Sys) !== 'undefined')
Sys.Application.notifyScriptLoaded();
ModalPopupExtenderで作成されたPanelのOpen、Closeに対応するメソッドはshow()とhide()です。