Modal Popup Windows in ASP.NET Web Applications
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:
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 <https://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/>
- Ajax Control Toolkit on Codeplex <https://ajaxcontroltoolkit.codeplex.com/>
- Modal Dialog Boxes with AJAX <https://msdn.microsoft.com/en-us/magazine/cc164247.aspx>
Comments
- Anonymous
February 11, 2012
Implementing popup's can be done with simple javascript also.JQuery also can do the job.I have added an example with using Javascript.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd"><html xmlns="www.w3.org/.../xhtml"><head> <script type="text/javascript"> function myPop() { this.square = null; this.overdiv = null; this.popOut = function (msgtxt) { this.overdiv = document.createElement("div"); this.overdiv.className = "overdiv"; this.square = document.createElement("div"); this.square.className = "square"; this.square.Code = this; var msg = document.createElement("div"); msg.className = "msg"; msg.innerHTML = msgtxt; this.square.appendChild(msg); var closebtn = document.createElement("button"); closebtn.onclick = function () { this.parentNode.Code.popIn(); } closebtn.innerHTML = "Ok"; this.square.appendChild(closebtn); document.body.appendChild(this.overdiv); document.body.appendChild(this.square); } this.popIn = function () { if (this.square != null) { document.body.removeChild(this.square); this.square = null; } if (this.overdiv != null) { document.body.removeChild(this.overdiv); this.overdiv = null; } } } </script></head><body> <button onclick="var pop = new myPop(); pop.popOut('Hi... .NET Message Box Equivalent'); " id="btnPopUp"> Click to Open PopUp</button></body></html> - Anonymous
February 11, 2012
Good one Arun. Thank you! - Anonymous
December 05, 2013
really nice ...you can try another example of it here this is also very helpful...www.alltechmantra.com/.../how-to-use-pop-up-control-in-asp.net.html - Anonymous
May 19, 2014
its k better - Anonymous
June 29, 2014
Very nice for beginners - Anonymous
November 05, 2014
The comment has been removed