この度、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を使って作ってみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<%--モーダル・ウィンドウとして表示するパネルを定義--%> <asp:Panel class="modalPanel" ID="popupControl1" runat="server" style="display:none"> <asp:Panel ID="TitleBar" runat="server" CssClass="TitleBar"> <asp:Literal ID="Literal1" runat="server" Text="メッセージ"></asp:Literal> <asp:Button ID="Button1" runat="server" Text="×" CssClass="Button1"/> </asp:Panel> <asp:Panel ID="Panel1" runat="server" Height="200px" Width="300px" Wrap="False" CssClass="Panel1"> <asp:Label ID="Label1" runat="server" Text=""/> </asp:Panel> </asp:Panel> <%--ModalPopupコントロールの諸設定--%> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" PopupControlID="popupControl1" TargetControlID="Btn_Dummy" CancelControlID="Btn_Dummy2" Drag="true" PopupDragHandleControlID="TitleBar"> </ajaxToolkit:ModalPopupExtender> |
ModalPopupコントロールの諸設定で以下の設定を行っています。
Drag = “true”
PopupDragHandleControlID = “TitleBar”
その後、モーダル・ウィンドウとして表示するパネルの設定で
PopupDragHandleControlID で指定したIDを持つパネルを定義しています。
上記の例では、あるモーダルダイアログのタイトルバーっぽくパネルを作っています。
こうすることで、以下のようにあたかもWindowのモーダルダイアログのようなダイアログを作ることが出来ます。
プログラミングの無料レッスン体験
約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp
＜Codecampの特徴＞
1 現役エンジニアによる指導
2オンラインでのマンツーマン形式の講義
3大手企業にも導入されている実践的なカリキュラム
↓無料体験レッスン実施中です。
コメント