ModalPopupExtenderでモーダル・ウィンドウを表示

投稿者: | 2011年11月7日

■元ネタ
http://www.atmarkit.co.jp/fdotnet/dotnettips/580aspajaxmodalpopup/aspajaxmodalpopup.html

■手順
1.ASP.NET AJAX Control Toolkitを利用できるようにする
2.モーダル・ウィンドウを表示するためのボタンを追加
3.モーダル・ウィンドウとして表示するパネルを定義
4.ツールボックスからToolkitScriptManagerをドラッグ&ドロップで画面に追加
5.ツールボックスからModalPopupExtenderをドラッグして2のボタンの上でドロップ
6.ソース画面で、ModalPopupExtenderのPopupControlIDに3で定義したパネルのIDを設定
7.その他のプロパティは元ネタを参照

■サンプルプログラム

<form id=”form1″ runat=”server”>
<asp:Button ID=”btnPopup” runat=”server” Text=”ポップアップ” /><asp:ToolkitScriptManager ID=”ToolkitScriptManager1″ runat=”server”>
</asp:ToolkitScriptManager><asp:ModalPopupExtender ID=”btnPopup_ModalPopupExtender” runat=”server”
TargetControlID=”btnPopup” PopupControlID=”pnlDialog” BackgroundCssClass=”modalBackground”
DropShadow=”true” Drag=”true” PopupDragHandleControlID=”pnl”
OkControlID=”btnOk” CancelControlID=”btnCancel”>
</asp:ModalPopupExtender><%–モーダル・ウィンドウとして表示するパネルを定義–%>
<asp:Panel ID=”pnlDialog” runat=”server”>
<asp:Panel ID=”pnl” runat=”server” Wrap=”False” BackColor=”#FFFFFF”>

<table bgcolor=”#000000″ border=”0″ cellpadding=”0″ cellspacing=”0″><tbody><tr><td>
<table border=”0″ cellpadding=”3″ cellspacing=”1″><tbody><tr bgcolor=”#FFFFFF”><td>

<p>てすと</p>
<p>
<asp:Button ID=”btnOk” runat=”server” Text=”決定” />
<asp:Button ID=”btnCancel” runat=”server” Text=”キャンセル” />
</p>

</td></tr></tbody></table>
</td></tr></tbody></table>

</asp:Panel>
</asp:Panel>

</form>


■実行例

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です