how to use modal popup extender control in asp.net

Now I am going to describe how to use Modal Popup Extender in ASP.NET website
Follow the below mentioned steps
Step 1. Add Ajax Control Toolkit reference in your website. For this See This Post
Step 2. If the ScriptManager tag is not present is your form then it should be specified inside the Form tag.<asp:ScriptManager Id="sm1" runat="server" />
Step 3. In head tag provide link to the css file like <link href="ModalTest.css" rel="stylesheet" type="text/css" />


ModalTest.css File is as follows



body, div, p, h1, h2, h3, h4, ul, li, table
    {
              margin:0;
              padding:0;
              border:none;
    }
    /*Modal Popup*/
    .modalBackground
    {
              background-color:Olive;
              filter:alpha(opacity=70);
              opacity:0.7;
    }
    .modalPopup
    {
              background-color:#ffffdd;
              border-width:3px;
              border-style:solid;
              border-color:Gray;
              padding:3px;
              width:250px;
    }

Step 4. now insert Madal Popup extender like
// Paste this code below the page directive and above all othe tags
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
// drap modal popup extender in you page and set popupcontrolid, targetcontrolid, cancelcontrolid and backgroundcssclass etc.. for example
<ajaxtoolkit:modalpopupextender
        id="mpeTest"
        runat="server"
        backgroundcssclass="modalBackground"
        cancelcontrolid="CancelButton"
        dropshadow="true"
        okcontrolid="OkButton"
        popupcontrolid="Panel1"   
        targetcontrolid="lbtnTest">
    </ajaxtoolkit:modalpopupextender>

where Panel1 is the Id of Panel which you want to show when Link Button lbtnTest clicked


Properties of Modal Popup Extender and their meaning



TargetControlID - The ID of the element that activates the modal popup
PopupControlID - The ID of the element to display as a modal popup
BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
DropShadow - Set to True to automatically add a drop-shadow to the modal popup
OkControlID - The ID of the element that dismisses the modal popup
OnOkScript - Script to run when the modal popup is dismissed with the  OkControlID
CancelControlID - The ID of the element that cancels the modal popup
OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
RepositionMode - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled


Hope this post helps you in using Modal PopupExtender in your website.