A Modal Popup Framework Based on the AJAX Control Toolkit
The "Announcements" feature that I developed for a customer about a year ago uses a modal popup window to display content to users. The solution leverages the AJAX Control Toolkit to render the modal popups – specifically the ModalPopupExtender class.
Refer to the following site for more information on the ModalPopupExtender class, including a sample page that demonstrates a popup window:
ModalPopup Demonstration
https://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx
To encapsulate the functionality for rendering modal popup windows, the "Announcements" feature builds upon a lightweight “Modal Popup Framework.” [Admittedly, calling this a "framework" is a little bit of a stretch.]
The framework essentially consists of the ModalPopupWebPart abstract base class which is primarily responsible for rendering the ModalPanel (i.e. a <div> element that serves as the container for content to display in the modal popup window), the Title Bar, and link buttons (OK and Cancel) to dismiss the popup window.
Note
Web Parts that derive from ModalPopupWebPart are responsible for displaying the main content of the popup window. This is typically done by overriding the CreateChildControls method to add controls to the ModalPanel.
The following figure illustrates the various UI elements of a modal popup window.
Figure 1: Elements of a modal popup window
As noted previously, the ModalPopupWebPart base class does not specify the main content to render in the popup window; nor does it specify the dimensions (width and height) of the popup window. Instead, Web Parts that derive from ModalPopupWebPart specify the content (and, optionally, the width and height of the main content).
For example, the modal popup window shown in Figure 1 was generated using the following sample code:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Fabrikam.Demo.Web.UI.WebControls
{
public class SamplePopupWebPart : ModalPopupWebPart
{
private Panel modalPanelContent;
private LiteralControl content;
protected override void CreateChildControls()
{
base.CreateChildControls();
modalPanelContent = new Panel();
modalPanelContent.CssClass = "modalPanelContent";
modalPanelContent.Width = new Unit(400);
base.ModalPanel.Controls.Add(modalPanelContent);
content = new LiteralControl();
modalPanelContent.Controls.Add(content);
content.Text =
@"<div class='mainContent'>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras imperdiet ligula ut turpis tristique ultricies. Aliquam accumsan mi
at ligula porta consectetur. Maecenas aliquam dictum dui quis venenatis. Donec
eros velit, dictum vel pretium eu, tempus eu neque. Aliquam tortor mi, lacinia
sit amet iaculis sit amet, porttitor sed neque. Sed eu turpis ante. Sed
consequat suscipit elit, non posuere sapien hendrerit pharetra. Integer dapibus
tortor a magna convallis congue. Mauris mollis turpis eu enim ornare
sollicitudin. Etiam nec lacus libero. Aliquam mattis rhoncus bibendum. Nunc
placerat nibh ut odio rhoncus ut gravida est suscipit. Etiam nec massa ut nibh
mattis fermentum rutrum vel tortor. Phasellus vitae eros ante.</div>";
}
}
}
Note that by specifying the height of the modalPanelContent element:
modalPanelContent.Height = new Unit(100);
…and specifying a corresponding CSS rule:
.modalPanel div.modalPanelContent {
overflow: auto;
}
…it is possible to constrain the height of the modal popup window and show a scrollbar as necessary. This is illustrated in the following figure.
Figure 2: Constraining the height of content displayed in a modal popup window
In addition to creating various user interface elements for modal popup windows, the ModalPopupWebPart also converts client-side events (e.g. clicking the OK link button) into server-side events. Note that this postback occurs asynchronously in order to preserve the “AJAX” experience by avoiding a refresh of the entire page. The ModalPopupWebPart base class also allows the labels of the OK and Cancel link buttons to be changed by derived classes, as well as the ability to hide either of the link buttons.
For example, it might be desireable to hide the Cancel link button and change the text of the OK button to be “Close” instead. When the user clicks the “Close” button, the derived Web Part can specify a server-side event handler (or simply override the OnModalPopupOk method) to perform some action.
protected override void OnModalPopupOk(
EventArgs e)
{
Debug.WriteLine("SamplePopupWebPart::OnModalPopupOk()");
base.OnModalPopupOk(e);
// Do something here...
}
If you would like to see the "Modal Popup Framework" in action, simply download and unzip the attachment to this post, open the Visual Studio 2010 solution, and then run it.
In my next post, I'll describe the "Announcements" feature that builds upon this framework in order to show marketing announcements on a SharePoint site.