ModalPopup の位置を決める (C#)
AJAX Control Toolkit の ModalPopup コントロールは、クライアント側の手段を使用してモーダル ポップアップを作成する簡単な方法を提供します。 ただし、コントロールにはポップアップを配置するための組み込み機能は用意されていません。
概要
AJAX Control Toolkit の ModalPopup コントロールは、クライアント側の手段を使用してモーダル ポップアップを作成する簡単な方法を提供します。 ただし、コントロールにはポップアップを配置するための組み込み機能は用意されていません。
手順
ASP.NET AJAX と Control Toolkit の機能をアクティブにするには、 ScriptManagerです。 コントロールは、ページ上の任意の場所 (ただし、 要素内) に配置する <form> 必要があります。
<asp:ScriptManager ID="asm" runat="server" />
次に、モーダル ポップアップとして機能するパネルを追加します。 ボタンを使用してポップアップを閉じます。
<asp:Panel ID="ModalPanel" runat="server" Width="500px">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
<asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>
ポップアップが表示されるたびに、ページ内の特定の場所に配置されます。 このタスクでは、クライアント側の JavaScript 関数が作成されます。 最初にパネルへのアクセスを試みます。 成功した場合、パネルの位置は CSS と JavaScript を使用して設定されます (ポップアップの位置を変更します)。 ただし、コントロールは ModalPopupExtender ポップアップの配置も試みます。 そのため、JavaScript コードはポップアップを 1 秒の 10 分の 1 に繰り返し配置します。
<script type="text/javascript">
var id = null;
function movePanel()
{
var pnl = $get("ModalPanel");
if (pnl != null)
{
pnl.style.left = "50px";
pnl.style.top = "50px";
id = setTimeout("movePanel();", 100);
}
}
ご覧のように、JavaScript メソッドの setTimeout() 戻り値はグローバル変数に保存されます。 これにより、 メソッドを使用して、必要に応じて clearTimeout() ポップアップの位置を繰り返し停止できます。
function stopMoving()
{
clearTimeout(id);
}
</script>
必要に応じて、ブラウザーでこれらの関数を呼び出すようにします。 パネルを movePanel() トリガーするボタンがクリックされたときに JavaScript 関数を呼び出す必要があります。
<div>
<asp:Button ID="btn1" runat="server" Text="Launch Modal Popup"
OnClientClick="movePanel();" />
</div>
ポップアップが stopMoving() 閉じられると、この関数が再生されます。これはコントロールで ModalPopupExtender トリガーできます。
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
TargetControlId="btn1" PopupControlID="ModalPanel" OkControlID="OKButton"
OnOkScript="stopMoving();" />
指定した位置にモーダル ポップアップが表示されます (フルサイズの画像を表示する 場合は、ここをクリックします)
