Click here to Skip to main content
Click here to Skip to main content
Go to top

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

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.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 3 PinmemberOmar Adnan Isaid6-Mar-13 20:19 
GeneralMy vote of 1 PinmemberGlashenko29-Aug-12 4:02 
GeneralMy vote of 1 Pinmembergladiatron14-Jul-12 16:07 
Questionsomething is missing Pinmembercjstg3-May-12 14:33 
GeneralMy vote of 5 Pinmemberstavrianosy11-Aug-11 4:27 
GeneralMy vote of 1 PinmemberFrank Kerrigan31-May-11 23:30 
GeneralMy vote of 3 PinmemberMaKost22-Jan-11 5:54 
GeneralImages missing PinsubeditorIndivara21-Jan-11 18:13 
GeneralOkButton PinmembergranadaCoder15-Nov-10 11:31 
GeneralModal Popup Extender Basics PinmemberPrashant.m@rupizinfotech.com24-Nov-09 0:59 
GeneralMy vote of 1 PinmemberPranav27-Nov-08 22:33 
Generalhelp from assign value to a global variable from inputed data inside a modal popup Pinmembera1t-f422-Oct-08 16:33 
AnswerRe: help from assign value to a global variable from inputed data inside a modal popup Pinmembersaanj22-Oct-08 18:11 
GeneralModalpopupextender problem Pinmembersrinivas prabhu1-Oct-08 0:12 
GeneralRe: Modalpopupextender problem Pinmembersaanj1-Oct-08 5:59 
GeneralRe: Modalpopupextender problem PinmemberMember 99761179-Apr-13 7:10 
General[Message Removed] PinmemberMojtaba Vali9-Apr-08 1:17 
GeneralFix the formatting, please! Pinmemberpsouza4micronet4-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 | Mobile
Web01 | 2.8.140916.1 | Last Updated 12 Apr 2008
Article Copyright 2008 by saanj
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid