Modal表示について
* ScriptManager (ツールボックスの[AJAX Extentions]-[ScriptManager]から選択。これがないと落ちる)
* ModalPopupExtender X 1
* Label X 1 (Label1。Modalからの値を表示させる)
* Button X 1 (Button1。Modal表示用)
* Panel X 1 (Panel1。Modal表示用)
+ TextBox X 1 (TextBox1。ModalのTextBox)
+ Button X 2 (Button2、3。ModalのOK・キャンセルボタン)
ModalPopupExtenderのプロパティ
* Drag:True
* DropShadow:True
* OkControlID:【ModalのOKボタン】
* CancelControlID:【ModalのCancelボタン】
* oncancelscript:【Modalのキャンセルボタン】
* onokscript:【ModalのOKボタン押下後のイベントハンドラ】
(仮に「onOkButtonOnModal()」)
* PopupControlID:【Modal表示用】
* TargetControlID:【Modal表示用】
* PopupDragHandleControlID:モーダル・ウィンドウをドラッグするために使用するハンドル部を表すコントロールのID値(一般的にはヘッダ/タイトル部を表すパネル)
サンプル
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
<!--
function clickOK() {
$get("Label1"). innerHTML = "Your type : " + $get("Text1").value + ".";
}
// -->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:LinkButton ID="LinkButton1" runat="server">ポップアップ</asp:LinkButton><br />
<asp:ModalPopupExtender ID="LinkButton1_ModalPopupExtender" runat="server"
TargetControlID="LinkButton1" PopupControlID="Panel1"
OkControlID="Button1"
OnOkScript="clickOK()" CancelControlID="Button2"
DropShadow="true" Drag="true" PopupDragHandleControlID="Panel2"
DynamicServicePath="" Enabled="True">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server">
<asp:Panel ID="Panel2" runat="server" Wrap="False" BackColor="#C0C0FF">
<p>Please Input your data :</p>
<p>
<asp:TextBox ID="Text1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="決定" />
<asp:Button ID="Button2" runat="server" Text="キャンセル" />
</p>
</asp:Panel>
</asp:Panel>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
参考文献
http://www.atmarkit.co.jp/fdotnet/dotnettips/580aspajaxmodalpopup/aspajaxmodalpopup.html