通过

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:

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:

 

 

 

 

 

  

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