AJAX ModalPopup Extender Control

This article demonstrates how to use ModalPopup Extender Control in ASP.Net using Ajax's.

Note: We are assuming that you have already completed the installation of the Ajax Toolkit as well as have a basic understanding of coding.

About the control:

The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it. When displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing. When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs custom script. The custom script will typically be used to apply whatever changes were made while the modal mode was active. If a postback is required, simply allow the OK/Cancel control to postback and the page to re-render. You can also absolutely position a modal popup by setting the X and Y properties. By default it is centered on the page, however if just X or Y is specified then it is centered vertically or horizontally.

This article provides a few steps which will be easy to follow.

Step 1:

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ScriptManager to the page. You can drag the ScriptManager from the Visual Studio Toolbox window onto the page. The ScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>

Step 2:

Drag a LinkButton Give id lnkLoginbtn

<asp:LinkButton ID="lnkLoginbtn" runat="server" >Login</asp:LinkButton>

Step 3:

Drag Panel control from Toolbox.Design a Login form in it.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none"  >

            <table style="width: 270px">
                <tr>
                    <td align="right">
                        <asp:Label ID="lblUsername" runat="server" Height="30px" Text="UserName :"></asp:Label>
                    </td>
                    <td style="width: 179px" >
    <asp:TextBox ID="txtUsername" runat="server" Width="100px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td style="width: 30% " align="right">
                        <asp:Label ID="lblPassword" runat="server" Height="30px" Text="Password :"></asp:Label>
                    </td>
                    <td style="width: 179px">
                        <asp:TextBox ID="txtPassword" runat="server" Width="100px"></asp:TextBox></td>
                </tr>
                <tr>
                    <td >
                    </td>
                    <td>
                        &nbsp; &nbsp; &nbsp;
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel"  />
                        <asp:Button ID="btnLogin" runat="server" Text="LogIn" OnClick="btnLogin_Click" /></td>
                </tr>
            </table>
      
    </asp:Panel>

Step 4:

Drag ModalPopup Extender Control from Ajax toolkits provide give

             TargetControlID="lnkLoginbtn"
             PopupControlID="Panel1"
             BackgroundCssClass="modalBackground"
             DropShadow="true"
             OkControlID="btnLogin"
             OnOkScript="ok()"
             CancelControlID="btnCancel"
 
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderLogin" runat="server"
             TargetControlID="lnkLoginbtn"
             PopupControlID="Panel1"
             BackgroundCssClass="modalBackground"
             DropShadow="true"
             OkControlID="btnLogin"
             OnOkScript="ok()"
             CancelControlID="btnCancel" />

Step 5:

In cs files btnLogin Click event write user Authentication Code.

protected void btnLogin_Click(object sender, EventArgs e)
    {
       
      [User Authentication Code………..]
       
    }

Step 6:

Run Website...........