The official website for the Ajax Control Toolkit that contains reference documentation, tutorials, and FAQs is located at http://www.asp.net/ajaxlibrary/.

Use ModalPopupExtender Control

ModalPopupExtender control is an AJAX control available in Ajax Control Toolkit. In order to any ASP.NET AJAX controls we need to use a component of ASP.NET AJAX called the ScriptManager control. ScriptManager is a server-side control that sits on your Web Form and enables the core of ASP.NET AJAX.

You can add the ScriptManager component from toolbox or type the following code:

Now you can add the ModalPopupExtender control from the toolbox or type the following code from within the ASP.NET designer source page:

The TargetControlID accepts the ID of the control when clicked activates the modal popup. Here it is a button called: btnPopupButton. The PopupControlID is the ID of the control which is displayed as a popup window, here it is the panel called: pnlPopupWindow. The following is an example of these controls:

To know more about the rest of the features, see the Figure 3 Properties of the ModalPopupExtender Control in Modal Dialog Boxes with AJAX.

In the above ModalPopupExtender properties, and Panel properties, you see BackgroundCssClass and CssClass respectively. The BackgroundCssClass displays the host application features to apply to any content underneath the modal popup when the popup is displayed. Here is the sample style sheet content:

For more information about its usage I suggest you to refer the topics/articles mentioned through out the topic.

Other references:

• ASP.NET AJAX Control Toolkit <http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/>
• Ajax Control Toolkit on Codeplex <http://ajaxcontroltoolkit.codeplex.com/>
• Modal Dialog Boxes with AJAX <http://msdn.microsoft.com/en-us/magazine/cc164247.aspx>