定位ModalPopup

2021-10-20

Christian Wenz

本文档是Visual Basic 教程（转至 Visual 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 代码会重复定位（每0.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);
          }
     }

如我们所见，setTimeout()JavaScript 方法的返回值保存在一个全局变量中。这将允许我们按需使用 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();" />

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

下一篇教程

通过

定位ModalPopup

概述

步骤

其他资源