ASP.Net 用户控件作为静态或可移动弹出窗口

• 下载源代码 - 81.4 Kb

** 在线演示！！ **

引言

这是一个非常简单的示例，展示了如何将 .ascx 用户控件转换为 Web 应用程序上的弹出窗口。几乎任何用户控件都可以被修改为用作弹出窗口，并且创建该效果所需的代码很少。大部分工作都在源代码中包含的 JavaScript 函数中完成。

弹出窗口示例控件

演示项目使用两种类型的控件作为弹出窗口。第一种类型只是一个信息窗口，可以用作非常有效的帮助显示。这些静态弹出窗口示例上的文本是从 XML 加载的，因此对文本的所有修改都可以在一个地方完成，并且可以非常容易地以编程方式进行修改。第二种类型的示例是一个被开发的控件，用于将列表中的项目折叠成组。原始项目列表显示在主页面上，单击“Go”按钮将显示可移动的折叠弹出窗口。

创建弹出窗口所需的代码

将控件转换为弹出窗口只需要很少的代码。对控件的唯一更改只是将控件定义为隐藏并使用绝对定位。折叠控件的单击事件也不应该冒泡，因为它将在主页面中处理。

<div class="collapsePop" id="CollapseContainer" 
     style="VISIBILITY: hidden; POSITION: absolute" 
     onclick="event.cancelBubble = true;" runat="server"></div> 

当弹出窗口控件的父页面加载时，必须创建该控件并将其连接到各种事件。 然后将控件添加到页面中定义的区域。

cc = (CollapseControl)LoadControl("CollapseControl.ascx");
cc.ID = this.ID + "_cc_1";
cc.ColDoneClick += new EventHandler(cc_ColDoneClick);
Control PopArea = Page.FindControl("PopArea"); 
Control cc1 = PopArea.FindControl(cc.ClientID); 
if (cc1 != null) PopArea.Controls.Remove(cc1);
PopArea.Controls.Add(cc); 

创建控件并将其加载到页面后，只需要分配按钮单击事件即可使此控件成为弹出窗口。

btnPop01.Attributes.Add("onclick", "return !showPop('" + 
        cc.ClientID + "_CollapseContainer', '',event,false,-10,-30,true," +
        sbCtrlIDs+ ",false);"); 

客户端 JavaScript 函数 `showPop` 将负责显示和隐藏弹出窗口，并具有各种参数设置，以使弹出窗口静态或可移动。 这些函数参数定义如下：

pID ：弹出窗口控件的 ID。
selID ：一个遮蔽弹出窗口的选择控件 ID（仅在 IE 6 的 Bug 修复中需要）。
eventObj ：触发该事件的函数。
bTimer ：如果鼠标移开时隐藏弹出窗口，则为 TRUE，否则为 FALSE。
OffX ：弹出窗口显示相对于事件目标的 X 偏移量。
OffY ：弹出窗口显示相对于事件目标的 Y 偏移量。
bVAlign ：如果弹出窗口应垂直对齐，则为 TRUE，否则为 FALSE。
ctrlIDs ：页面上可能遮蔽弹出窗口的选择控件数组（仅用于 IE 的 Bug 修复）。
bAnimate ：如果弹出窗口应以展开动画显示，则为 TRUE，如果正常显示，则为 FALSE。

最终注释

这些示例是非常基本的控件，用于展示在网页上创建弹出效果是多么容易。由于任何控件都可以有效地用作弹出窗口，因此创建不同且高效的效果的可能性是无限的。 希望您会发现这些很有用。