Modal Popup Windows in ASP.NET Web Applications

  • Article

We all know about the Popup windows being used in Windows based .NET applications, and its usability. In ASP.NET Web based applications we don’t have any control that can be used to accomplish this. There are some third party controls which can be used to fulfill the requirement. The one I generally use is ModalPopupExtender. This is an ASP.NET AJAX control which can be obtained through Ajax Control Toolkit. For more information see, Ajax Control Toolkit <https://ajaxcontroltoolkit.codeplex.com/> on Codeplex.

The official website for the Ajax Control Toolkit that contains reference documentation, tutorials, and FAQs is located at https://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:

ScriptManager

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

ModalPopupExtender

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:

PopupItems

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:

Style

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

Other references: