定位 ModalPopup (C#)

  • 项目

作者 ：Christian Wenz

下载 PDF

AJAX 控件工具包中的 ModalPopup 控件提供了一种使用客户端方法创建模式弹出窗口的简单方法。 但是， 控件不提供内置功能来定位弹出窗口。

概述

AJAX 控件工具包中的 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 代码每隔十分之一秒重复定位弹出窗口。

<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();" />

模式弹出窗口显示在指定位置

模式弹出窗口显示在指定位置 (单击以查看全尺寸图像)

上一页下一页