Click here to Skip to main content
13,803,680 members
Click here to Skip to main content
Add your own
alternative version


37 bookmarked
Posted 4 Mar 2008
Licenced CPOL

Modal Popup Extender Basics

, 12 Apr 2008
Rate this:
Please Sign up or sign in to vote.
Demonstrates how to use the Modal Popup Extender Control


I want to take this opportunity to introduce a new useful control that can make our web applications really interactive. In this quick demonstration, I am going to show you how we can implement a modal Dialog Box using AJAX in ASP.NET. Modal Dialog Box (formally called ModalPopupExtender) is extremely essential in today’s applications, as writing JavaScript to open a pop-up or to open a separate ASP.NET page as a pop-up are sometimes very tedious, time consuming and more importantly, many times performance has to be sacrificed. A simple example can prove my point.

Steps for demonstration

  1. Create a new AjaxEnabledWebSite from the Visual Studio Project Wizard options.
  2. Add the AjaxControlToolkit.dll which is attached with this article to the reference collections of the Web Project. 
  3. In any page in your Web Application (let's say Default.aspx), add a Link Button named like "View Job Details".
  4. Add an HTML table with some static values and an OK and Cancel button. Place these controls (not the link button) inside a Panel control. 
  5. If the ScriptManager tag is not present in your form, then it should be specified inside the Form tag. 
  6. <asp:ScriptManager ID="ScriptManager1" runat="server" />  
  7. Design the page as shown below: 
  8. <shapetype id="_x0000_t75" coordsize="21600,21600" o:preferrelative="t" o:spt="75" filled="f" stroked="f" path=" m@4@5 l@4@11@9@11@9@5 xe"><stroke joinstyle="miter"><formulas /><f eqn="if lineDrawn pixelLineWidth 0 "><f eqn="sum @0 1 0 "><f eqn="sum 0 0 @1 "><f eqn="prod @2 1 2 "><f eqn="prod @3 21600 pixelWidth "><f eqn="prod @3 21600 pixelHeight "><f eqn="sum @0 0 1 "><f eqn="prod @6 1 2 "><f eqn="prod @7 21600 pixelWidth "><f eqn="sum @8 21600 0 "><f eqn="prod @7 21600 pixelHeight "><f eqn="sum @10 21600 0 "></formulas /></f></f></f></f></f></f></f></f></f></f></f></f><f eqn="if lineDrawn pixelLineWidth 0 "><f eqn="sum @0 1 0 "><f eqn="sum 0 0 @1 "><f eqn="prod @2 1 2 "><f eqn="prod @3 21600 pixelWidth "><f eqn="prod @3 21600 pixelHeight "><f eqn="sum @0 0 1 "><f eqn="prod @6 1 2 "><f eqn="prod @7 21600 pixelWidth "><f eqn="sum @8 21600 0 "><f eqn="prod @7 21600 pixelHeight "><f eqn="sum @10 21600 0 "><path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"><lock aspectratio="t" v:ext="edit"><shape id="Picture_x0020_1" style="width: 559.5pt; height: 265.5pt;" coordsize="21600,21600" o:spid="_x0000_i1025" type="#_x0000_t75"><imagedata src="/KB/ajax/ModalPopupExtender%20Control_files/image001.jpg" o:href="cid:image003.jpg@01C87E20.6E62C880" />

  9. Add the following style sheet to a separate new file or the page itself. In this example, a separate file called StyleSheet.css has been created and included in the page.
  10. body, div, p, h1, h2, h3, h4, ul, li, table 
    /* Modal Pop-up */ 
  11. In the head tag, place the following code:
  12. <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
  13. Now place the following code just above the Panel control in a seprate row:
  14. <ajaxtoolkit:modalpopupextender 

    The CancelControlId property of the ModalPopUpExtender signifies that which control is treated as the Cancel button. By default property of this control is to close the dialog. But it can be customized using OnCancelScript attributes. You just need to use any JavaScript function to do that. There is a OnOkScript attribute as well.

  15. It’s mandatory to register the assembly (AJAXControlToolKit.dll). So the following code has to be placed after the page directive.
  16. <%@ Register Assembly="AjaxControlToolkit" 
        TagPrefix="ajaxToolkit" %>  
  17. Now here comes the demo, just click on the "View job Details" button and see the Modal Popup.
  18. <shape id="Picture_x0020_2" style="width: 516pt; height: 356.25pt;" coordsize="21600,21600" o:spid="_x0000_i1026" type="#_x0000_t75"><imagedata src="/KB/ajax/ModalPopupExtender%20Control_files/image002.jpg" o:href="cid:image006.jpg@01C87E20.6E62C880" />

  19. You can change the opacity, background color of the background. It’s all up to you and how you can play with style sheet to make your application more interactive.

<shape id="Picture_x0020_3" style="width: 634.5pt; height: 351pt;" coordsize="21600,21600" o:spid="_x0000_i1027" type="#_x0000_t75"><imagedata src="/KB/ajax/ModalPopupExtender%20Control_files/image003.jpg" o:href="cid:image009.jpg@01C87E20.6E62C880" />

This is a basic idea and demonstration about how to implement Modal Popup Extender in ASP.NET. The representation shows above simply demonstrates a Search window. This window contains a GridView which itself calls a web service to produce the search result. Please send your thoughts, ideas, suggestions and views.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
United Kingdom United Kingdom
A SharePoint Kid playing in Kolkata, India.

Working with one of the leading software company and currently working with SharePoint technologies.

Enjoys Cricket, National & World Music.

Favourite band include Linkin Park, Beatles, Oasis, Match Box 20, Noori, Nirvana, Nickelback etc.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 3 Pin
Omar Isaid6-Mar-13 21:19
memberOmar Isaid6-Mar-13 21:19 
GeneralMy vote of 1 Pin
Glashenko29-Aug-12 5:02
memberGlashenko29-Aug-12 5:02 
GeneralMy vote of 1 Pin
I.explore.code14-Jul-12 17:07
memberI.explore.code14-Jul-12 17:07 
Questionsomething is missing Pin
cjstg3-May-12 15:33
membercjstg3-May-12 15:33 
GeneralMy vote of 5 Pin
stavrianosy11-Aug-11 5:27
memberstavrianosy11-Aug-11 5:27 
GeneralMy vote of 1 Pin
Frank Kerrigan1-Jun-11 0:30
memberFrank Kerrigan1-Jun-11 0:30 
GeneralMy vote of 3 Pin
MaKost22-Jan-11 6:54
memberMaKost22-Jan-11 6:54 
GeneralImages missing Pin
Indivara21-Jan-11 19:13
professionalIndivara21-Jan-11 19:13 
GeneralOkButton Pin
granadaCoder15-Nov-10 12:31
membergranadaCoder15-Nov-10 12:31 
GeneralModal Popup Extender Basics Pin
Prashant.m@rupizinfotech.com24-Nov-09 1:59
memberPrashant.m@rupizinfotech.com24-Nov-09 1:59 
GeneralMy vote of 1 Pin
The Cyclone27-Nov-08 23:33
memberThe Cyclone27-Nov-08 23:33 
Generalhelp from assign value to a global variable from inputed data inside a modal popup Pin
a1t-f422-Oct-08 17:33
membera1t-f422-Oct-08 17:33 
AnswerRe: help from assign value to a global variable from inputed data inside a modal popup Pin
saanj22-Oct-08 19:11
membersaanj22-Oct-08 19:11 
GeneralModalpopupextender problem Pin
srinivas prabhu1-Oct-08 1:12
membersrinivas prabhu1-Oct-08 1:12 
GeneralRe: Modalpopupextender problem Pin
saanj1-Oct-08 6:59
membersaanj1-Oct-08 6:59 
GeneralRe: Modalpopupextender problem Pin
Member 99761179-Apr-13 8:10
memberMember 99761179-Apr-13 8:10 
General[Message Removed] Pin
Mojtaba Vali9-Apr-08 2:17
memberMojtaba Vali9-Apr-08 2:17 
GeneralFix the formatting, please! Pin
Pete Souza IV4-Mar-08 5:12
professionalPete Souza IV4-Mar-08 5:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.181215.1 | Last Updated 12 Apr 2008
Article Copyright 2008 by saanj
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid