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

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

方法は次の通りです。

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を使って作ってみましょう。

<%--モーダル・ウィンドウとして表示するパネルを定義--%>
<asp:Panel class="modalPanel" ID="popupControl1" runat="server">
    <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>

<%--モーダル・ウィンドウとして表示するパネルを定義--%>

<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>

<%--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大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp