Ajax ModalPopupExtender example to open login form in popup window in asp.net

Introduction: In this article i am going to demonstrate with example How to use ModalPopupExtender control of Ajax in asp.net to open the log in form in popup window on click of link or button. Similarly you can open the registration form/sign up form,change password form or any kind of form in the pop up using ModalPopupExtender.
Ajax ModalPopupExtender control example in asp.net
Click on image to  enlarge
Description: In previous articles i explained How to Close Ajax ModalPopUpExtender on Background click outside the popup window and Close Ajax ModalPopUpExtender control on esc key press and How to use Ajax CascadingDropDown example in asp.net to Fill DropDownList with Countries,states and cities and How to use Ajax PasswordStrength indicator example in asp.net for password field and How to use Ajax TextBoxWatermarkExtender example in asp.net.

Modal Popup Extender control can be used to show something in popup or we can also show modal dialog box because it prevents the user from interacting with the rest page.

So whenever the login button is clicked then the log in form will be displayed in popup that will be in center of the screen(By default).It is now being widely used because of its eye catching features.

Below are some of the properties of the ModalPopupExtender control that i have used and can be set as per requirement.
  1. TargetControlID – Here set the Id of the element that triggers the modal popup e.g. In our case Id of the HyperLink control. 
  2. PopupControlID – Here set the Id of the element to display as a modal popup e.g. in our example id of the Panle control. 
  3. BackgroundCssClass – This is the CSS class to apply styles to the background when the modal popup is displayed. 
  4. DropShadow – Set it to True if you want to automatically add a drop-shadow to the modal popup control. 
  5. CancelControlID - The ID of the element that cancels the modal popup e.g. in our case Id of the Close button. 
Implementation: Let's create an application to see it working. 
  • In the <Head> tag of the design page (.aspx) create the styles as:
<style type="text/css">
    #loginform
    {
        min-width:200px;
        height:110px;
        background-color:#ffffff;
        border:1px solid;
        border-color:#555555;
        padding:16px 16px;
        border-radius:4px;
        -webkit-box-shadow: 0px 1px 6px rgba(75, 31, 57, 0.8);
        -moz-box-shadow:     0px 1px 6px rgba(75, 31, 57, 0.8);
        box-shadow:              0px 1px 6px rgba(223, 88, 13, 0.8);
    }
    .modalBackground
    {      
        background-color:#333333;
        filter:alpha(opacity=80);
        opacity:0.8;
    }      
    .txt
    {
         color:#505050;   
    }
    .redstar
    {
        color: #FF0000;
    }       
    </style>

But it always recommended to place all the styles into the style sheet so that they can be used throughout the project.  So remove the styles from the <Head> tag because we will create the styles in the style sheet.
  • So create a style sheet to give the styles to the Modal Popup Extender that we are going to create. So to add style sheet in the website go to website menu and click Add New item.. -> Select StyleSheet.css and leave the name as it is (i.e Stylesheet.css) 
  • In the Stylesheet.css paste the following and save the file
    #loginform
    {
        min-width:200px;
        height:110px;
        background-color:#ffffff;
        border:1px solid;
        border-color:#555555;
        padding:16px 16px;
        border-radius:4px;
        -webkit-box-shadow: 0px 1px 6px rgba(75, 31, 57, 0.8);
        -moz-box-shadow:     0px 1px 6px rgba(75, 31, 57, 0.8);
        box-shadow:              0px 1px 6px rgba(223, 88, 13, 0.8);
    }
    .modalBackground
    {      
        background-color:#333333;
        filter:alpha(opacity=80);
        opacity:0.8;
    }      
    .txt
    {
         color:#505050;   
    }
    .redstar
    {
        color: #FF0000;
    }       

  • In the <Head> tag of the design page(.aspx)  set reference to style sheet. So in the <Head> tag paste the line <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
  • Now In the <Form> tag of the design page (.aspx) places a ScriptManager control from the AJAX Extension category of the Visual Studio’s Toolbox. Place a HyperLink control, Two TextBox controls and a Two Button controls. Note I have also implemented RequiredFieldValidator validation control to avoid the chances of empty form submission.  Also place ModalPopupExtender control from the AjaxControlToolkit. If you have not installed the AjaxControlToolkit then read the article How to install AjaxControlToolkit in Visual Studio.
 <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>     
       <table>
       <tr>
      <td width="1100px" height="600px" align="center" valign="middle"><asp:HyperLink ID="btnLogin" runat="server" NavigateUrl="#">Login</asp:HyperLink></td>
       </tr>
       </table>
        <asp:ModalPopupExtender ID="ModalPopupExtender1"
         TargetControlID="btnlogin"
         PopupControlID="popUpPanel"
         CancelControlID="btnclose"
         BackgroundCssClass="modalBackground"
         DropShadow="true"
         runat="server">
        </asp:ModalPopupExtender>
        <asp:Panel ID="popUpPanel" runat="server">
        <div id="loginform">
        <table>
        <tr>
            <td><span class="txt">Username: </span><span class="redstar">*</span></td>
            <td><asp:TextBox ID="txtUserName" runat="server" placeholder=" UserName"
                    Width="186px"></asp:TextBox>
                <asp:RequiredFieldValidator ID="rfvUserName" runat="server"
                    ErrorMessage="Please enter  User Name" ControlToValidate="txtUserName"
                    Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
                    </td>
        </tr>
        <tr>
             <td><span class="txt">Password: <span class="redstar">*</span> &nbsp;&nbsp;</span></td><td><asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder=" Password" Width="186px"></asp:TextBox>
             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                 ControlToValidate="txtPwd" Display="Dynamic"
                 ErrorMessage="Please enter Password" ForeColor="Red" SetFocusOnError="True"></asp:RequiredFieldValidator>
             </td>
        </tr>
        <tr>
            <td></td><td><asp:Button ID="btnSubmit" runat="server" Text="Login" /><asp:Button ID="btnclose" runat="server" Text="Close" CausesValidation="false" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td><td><span class="txt">&nbsp;New User? Click Here For</span> <a href="#">Sign Up</a><b></b></td>
        </tr>
        </table>
        </div>
        </asp:Panel>
    </div>

Note: Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing  ModalPopupExtender control on design page.

Now run the application and check .

Now over to you: 
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates." 
Previous
Next Post »

21 comments

Click here for comments
Anonymous
admin
August 02, 2013 ×

That's a simple one but its really good. I was looking for it. I'm gonna change few of its code and will use it for my under construction website.. thanks for this post, it helped me alot.

Reply
avatar
Anonymous
admin
August 19, 2013 ×

thanks yar its good and very much comprehensive

Reply
avatar
August 19, 2013 ×

Thanks for your appreciation..stay tuned and stay connected

Reply
avatar
Anonymous
admin
August 27, 2013 ×

Hey. i CopY these code but not worked....do u have solution...

Reply
avatar
August 27, 2013 ×

the code is completely working..i suggest you to read the article thoroughly and recheck your project and let me know.

Reply
avatar
Unknown
admin
August 28, 2013 ×

thank....... my problem is solved

Reply
avatar
August 28, 2013 ×

it is always nice to hear that my article helped anyone..stay tuned and stay connected for more useful updates..

Reply
avatar
Anonymous
admin
September 09, 2013 ×

one ... thousand examples. What about the behind code?

Reply
avatar
mazhar
admin
September 20, 2013 ×

check the TargetControlID="btnlogin" and HyperLink ID="btnLogin", both have different name.. but after the changing code , again not working... actually im new in ajax.. i read ur instruction every thing... install ajax completely... i read instruction step by step.. thaks...

Reply
avatar
September 20, 2013 ×

the code is completely working..But if you are facing problems then send me your sample website on my email id lalit24rocks@gmail.com. I will check and make corrections if required.

Reply
avatar
RSS
admin
September 23, 2013 ×

its good articale but here button click event would not fire..please help ..how to solve its

Reply
avatar
Anonymous
admin
November 20, 2013 ×

It is working perfectly thank you very much....

Reply
avatar
November 20, 2013 ×

i am glad you enjoyed the article..keep reading and stay connected for more updates like this..:)

Reply
avatar
Anonymous
admin
December 14, 2013 ×

Thanks!!

Reply
avatar
December 15, 2013 ×

Your welcome ..keep reading for more useful updates like this..:)

Reply
avatar
Anonymous
admin
June 17, 2014 ×

nice

Reply
avatar
Anonymous
admin
December 04, 2014 ×

very nice articles and i request you to provide source code with the articles

Reply
avatar
Anonymous
admin
December 21, 2014 ×

hey button click event is not working....please help

Reply
avatar
December 27, 2014 ×

Because there is no code behind the button click...this article just demonstrates how to open login form in popup window

Reply
avatar
Unknown
admin
October 23, 2015 ×

nice and easy

Reply
avatar
October 24, 2015 ×

Thanks for your valuable feedback..stay connected and keep reading

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..