ASP.NET中最漂亮、最酷的弹出对话框

Tomas Petricek著
Highly customizable JavaScript popup control for web page wrapped in ASP.NET custom control.



ASP.NET弹出窗口
一个使用javascript编写的，用于在ASP.NET中弹出对话框的用户控件,有渐进颜色，还有能设定弹出时的移动的时间,支持Mozilla, Internet Explorer 和 Opera



介绍
这篇文章介绍了一个ASP.NET的窗口弹出控件。该控件模仿MSN 消息警告框的样式，但，它是运行于ASP.NET中的。该窗口的样式可以由用户完全控制，通过设置其颜色或预定义的窗口模式就可修改。该控件还支持窗口拖动，用户可以在窗口上的任一位置移动它。

另 外一个很重要的特性是：该控件适用于多种浏览器。它已经在Microsoft IE，Mozilla Firefox和Opera上进行过测试。但它在不同浏览器上的外观并不完全一样，所以它还不支持filters （filters 仅仅在Microsoft IE最新版中才得到支持。）你可以得到它的HTML属性，因此，可以通过各种属性控制该控件。

以下使用popup代表弹出的对话框控件。

行为事件
该控件有两个事件， LinkClicked (当popup窗口被鼠标点击时的动作) 和PopupClosed (用户单击关闭按钮时的动作)。有三种方式如何处理这些事件。具体使用哪种是由ActionType 决定的。三种行为是：
1，MessageWindow (default) ，在这种情况下，用户控件会打开一个新的浏览窗口，在新的窗口中显示指定在Text 属性中的文字。
2， OpenLink， 在这种情况下，控件允许你做任何 JavaScript 操作或打开链接导任何其它网页 (Link property). 你还可以改变<A>标签内的Target 属性。产生的代码如：<a href="[Link]" target="[LinkTarget]">Link..</a>，因此在链接中小心地使用双引号。（Target 属性只有在 LinkTarget 为空的时候才被加上去）
3，RaiseEvents 当你选择了这种模式，该控件的LinkClicked 或PopupClosed 事件将会被提升到服务器端执行。



使用方法
添加这个控件到网页上是很容易的，在Visual studio 开发环境中，你可以仅仅通过在控件工具栏上添加/删除新控件，然后选择本控件的DLL文件。这样，控件就会如普通的按钮、文本框一样，显示在toolbox 中，接下来的使用就是拖到页面上就可以了。

设计
控 件对进一步的设计提供了很丰富的支持，你可以在设计过程中改变它的每一个属性。在Action属性目录下，你可以定义当控件被点击之后的具体动作。在 Texts和Design属性目录中，你可以修改popup对话框的样式和显示的内容。在Behavior属性中，你可以改变控件被显示或隐藏的时间。 AutoShow属性表明是否控件将在页面一被加载的时候就显示。如果你设置DragDrop为true用户还可以改变控件的位置，在页面上拖动该窗口。 如果你把ActionType设置成MessageWindow，你可以通过Window属性目录改变最终显示的消息框的属性。最后一些属性位于 Layout中，它们决定了该窗口的显示位置。


代码
下面的代码描述了如何设置和显示该控件。

Code:

<!-- Popup.aspx -->
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"
  Assembly="EeekSoft.Web.PopupWin" %>

 

Code:

<cc1:popupwin id="popupWin" runat="server" visible="False"
  colorstyle="Blue" width="230px" height="100px" dockmode="BottomLeft"
  windowscroll="False" windowsize="300, 200"></cc1:popupwin>

 

 

// Popup.aspx.cs
// 改变动作类型
popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow;
// 设置popup窗口文本
popupWin.Title="This is popup";
popupWin.Message="Message displayed in popup";
popupWin.Text="Text to show in new window..";
// 改变颜色
popupWin.ColorStyle=EeekSoft.Web.PopupColorStyle.Green;
// 改变时间
popupWin.HideAfter=5000;
popupWin.ShowAfter=500;
// 显示类型（页面加载时显示）
popupWin.Visible=true;

 

使用anchor控件
设计


添 加anchor控件到页面上的方法和添加popup控件到页面上非常相似。当你添加了一个anchor控件到页面上之后，你可以选择任何已经存在于服务端 的控件ID，或选择一个你想处理的客户端事件。如果你只是想重新打开popup控件，你只需要保证popup窗口控件会被传到客户端，并且是可见的就行。 如果你不希望popup窗口在页面一载入的时候就显示，可以设置AutoShow属性为false。
你还可以选择使用PopupWinAnchor来改变popup窗口中的文字。设置anchor控件的ChangeTexts属性为True，然后anchor控件会通过NewTitle，NewMessage和NewText设置新的popup窗口文字。



代码
下面的例子描述了如何使用PopupWinAnchor控件重新打开刚被关闭的popup窗口。

 

<!-- Anchor.aspx -->
<%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"
  Assembly="EeekSoft.Web.PopupWin" %>
 

<cc1:popupwin id="popupWin" runat="server" visible="False"
colorstyle="Blue" width="230px" height="100px" dockmode="BottomLeft"
windowscroll="False" windowsize="300, 200"></cc1:popupwin>
<cc1:popupwinanchor id="popupAnchor" runat="server"
changetexts="False"></cc1:popupwinanchor>
<span id="spanReopen"> Click here to reopen popup ! </span>
 

// Anchor.aspx.cs
// 处理鼠标单击事件
popupAnchor.HandledEvent="onclick";
// .. of spanReopen 元素
popupAnchor.LinkedControl="spanReopen";
// 当事件存在时，显示popup窗口
popupAnchor.PopupToShow="popupWin";
// Popup win is visible ..
popupWin.Visible=true;
// .. and will be displayed when page is loaded
popupWin.AutoShow=true;

在执行时动态加载控件

以前在动态加载控件是有问题的，不过已经被修改了；） 这里是一个动态创建popup窗口的例子。 该例子将会演示当用户单击spanReopen 元素时，动态创建popup窗口。（假设，你的页面上有一个叫spanReopen 的元素）

 

 

// Create popup window and popup win anchor control (in Page_Load)
PopupWin popupWin=new PopupWin();
PopupWinAnchor popupAnchor=new PopupWinAnchor();
// 添加控件到页面
placeHolder.Controls.Add(popupAnchor);
placeHolder.Controls.Add(popupWin);
// Set anchor properties
popupAnchor.PopupToShow=popupWin.ClientID;
popupAnchor.LinkedControl="spanReopen";
popupAnchor.HandledEvent="onclick";
// Set popup win properties
popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow;
popupWin.Title="This is popup";
popupWin.Message="Message displayed in popup";
// Show popup
popupWin.Visible=true;
popupWin.AutoShow=false;

用途

该 控件能够很好地用于提示用户重要信息。例如，在web邮件客户端，你可能想提示用户有新消息；在用户可以相互通信的系统中，你可以使用它警告用户有一些人 想和它对话。该控件的优点是，它不需要在页面上占有任何固定的位置，而且很醒目。另外一个可以使用的地方是：用于广告显示，这样就没必要做一个flash 了。

Anchor控件可以使popup控件更快，并且减少页面的重新加载。比如，你可以使用popup控件为一些页面控件显示快速帮助。快速帮助在文本框被聚焦的时候显示，或在文本框后面加一个按钮，当按钮执行时显示。

Download demo project (C# and VB.NET) - 38.2 KB

Download control with source - 37.7 KB

Download control documentation - 71.1 Kb