Click here to Skip to main content
11,705,610 members (56,106 online)
Click here to Skip to main content

Modal Popup Extender Basics

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

Introduction

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 window.open() 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. <formulas /></formulas />

  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 
    {
        margin:0;
        padding:0;
        border:none;
    }
    
    /* Modal Pop-up */ 
    
    .modalBackground 
    {
        background-color:
        filter:alpha(opacity=70);
        opacity:0.7; 
    } 
    
    .modalPopup 
    {
        background-color:#ffffdd; 
        border-width:3px; 
        border-style:solid; 
        border-color:Gray; 
        padding:3px; 
        width:250px; 
    }
  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 
        id="ModalPopupExtender" 
        runat="server" 
        backgroundcssclass="modalBackground" 
        cancelcontrolid="CancelButton" 
        dropshadow="true" 
        okcontrolid="OkButton" 
        popupcontrolid="Panel1" 
        popupdraghandlecontrolid="Panel3" 
        targetcontrolid="lbn_job_det"> 
    </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" 
        Namespace="AjaxControlToolkit" 
        TagPrefix="ajaxToolkit" %>  
    
  17. Now here comes the demo, just click on the "View job Details" button and see the Modal Popup.
  18. 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.

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.

License

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

Share

About the Author

saanj
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 Adnan Isaid6-Mar-13 20:19
memberOmar Adnan Isaid6-Mar-13 20:19 
GeneralMy vote of 1 Pin
Glashenko29-Aug-12 4:02
memberGlashenko29-Aug-12 4:02 
GeneralMy vote of 1 Pin
gladiatron14-Jul-12 16:07
membergladiatron14-Jul-12 16:07 
Questionsomething is missing Pin
cjstg3-May-12 14:33
membercjstg3-May-12 14:33 
GeneralMy vote of 5 Pin
stavrianosy11-Aug-11 4:27
memberstavrianosy11-Aug-11 4:27 
GeneralMy vote of 1 Pin
Frank Kerrigan31-May-11 23:30
memberFrank Kerrigan31-May-11 23:30 
GeneralMy vote of 3 Pin
MaKost22-Jan-11 5:54
memberMaKost22-Jan-11 5:54 
GeneralImages missing Pin
Indivara21-Jan-11 18:13
subeditorIndivara21-Jan-11 18:13 
GeneralOkButton Pin
granadaCoder15-Nov-10 11:31
membergranadaCoder15-Nov-10 11:31 
GeneralModal Popup Extender Basics Pin
Prashant.m@rupizinfotech.com24-Nov-09 0:59
memberPrashant.m@rupizinfotech.com24-Nov-09 0:59 
GeneralMy vote of 1 Pin
Pranav27-Nov-08 22:33
memberPranav27-Nov-08 22:33 
Generalhelp from assign value to a global variable from inputed data inside a modal popup Pin
a1t-f422-Oct-08 16:33
membera1t-f422-Oct-08 16:33 
AnswerRe: help from assign value to a global variable from inputed data inside a modal popup Pin
saanj22-Oct-08 18:11
membersaanj22-Oct-08 18:11 
GeneralModalpopupextender problem Pin
srinivas prabhu1-Oct-08 0:12
membersrinivas prabhu1-Oct-08 0:12 
GeneralRe: Modalpopupextender problem Pin
saanj1-Oct-08 5:59
membersaanj1-Oct-08 5:59 
GeneralRe: Modalpopupextender problem Pin
Member 99761179-Apr-13 7:10
memberMember 99761179-Apr-13 7:10 
General[Message Removed] Pin
Mojtaba Vali9-Apr-08 1:17
memberMojtaba Vali9-Apr-08 1:17 
GeneralFix the formatting, please! Pin
psouza4micronet4-Mar-08 4:12
memberpsouza4micronet4-Mar-08 4:12 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150819.1 | Last Updated 12 Apr 2008
Article Copyright 2008 by saanj
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid