ModalPoupExtenderでドラッグ&ドロップする (Ajax Control Toolkit)

この度、Ajax Control ToolkitでModalPopupExtenderを使って作ったダイアログを、あたかもウィンドウのようにタイトルバーを掴んでドラッグ&ドロップで移動できるようにしました。

方法は次の通りです。

スポンサーリンク

ModalPopupExtender でドラッグ&ドロップする方法

ModalPopupExtenderの主なプロパティは次の通りです。

<プロパティ名 概要
TargetControlID モーダル・ウィンドウをポップアップするコントロールのID値
PopupControlID モーダル・ウィンドウとして表示するコントロールのID値
BackgroundCssClass モーダル・ウィンドウを表示する際の背景として適用するCSSクラス
DropShadow モーダル・ウィンドウに影効果を適用するか
Drag true or false モーダル・ウィンドウをドラッグする
OkControlID モーダル・ウィンドウ内で[OK]ボタンの役割を持つコントロールのID値
OnOkScript [OK]ボタンがクリックされたタイミングで実行されるクライアント側スクリプト
CancelControlID モーダル・ウィンドウ内で[キャンセル]ボタンの役割を持つコントロールのID値
OnCancelScript [キャンセル]ボタンがクリックされたタイミングで実行されるクライアント側スクリプト
PopupDragHandleControlID モーダル・ウィンドウをドラッグするために使用するハンドル部を表すコントロールのID値(一般的にはヘッダ/タイトル部を表すパネル)
X モーダル・ウィンドウの表示位置(ウィンドウ左上のX座標。デフォルトは中心)
Y モーダル・ウィンドウの表示位置(ウィンドウ左上のY座標。デフォルトは中心)

それでは、ドラッグ&ドロップできるモーダルダイアログをModalPopupExtenderを使って作ってみましょう。

ModalPopupコントロールの諸設定で以下の設定を行っています。

Drag = "true"

PopupDragHandleControlID = "TitleBar"

その後、モーダル・ウィンドウとして表示するパネルの設定で

PopupDragHandleControlID で指定したIDを持つパネルを定義しています。

上記の例では、あるモーダルダイアログのタイトルバーっぽくパネルを作っています。

こうすることで、以下のようにあたかもWindowsのWindowのようなモーダルダイアログを作ることが出来ます。

スポンサーリンク
スポンサーリンク
Translate »