How to use ModalPopupExtender Ajax control in OR ModalPopupExtender Ajax control Example - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

How to use ModalPopupExtender Ajax control in OR ModalPopupExtender Ajax control Example

Introduction: In this article I will try to explain how we can use the ModalPopupExtender Ajax control in


We use the ModalPopup control to display the data in popup. Add a new webform to project. Add the below given style between Head Tag:
<style type="text/css">
    border:1px solid;
    padding:15px 15px;
      -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(75, 31, 57, 0.8);

Drag and drop the ModalPopupExtender control Toolbox.Property of ModalPopupExtender Control:
TargetControlID: ID of the element to activate the Modal popup
PopupControlID:ID of the element to display the Modal pop up
CancelControlID:ID of the element to that cancel the Modal popup
BackgroundCssClass:CSS class applied to Modal popup when it display

 Design your .aspx page as mention below:
<asp:ScriptManager ID="ScriptManager1" runat="server">
        <asp:Button ID="btnlog" runat="server" Text="Login" />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnlog" PopupControlID="panel" CancelControlID="btncancel" BackgroundCssClass="modal">
        <asp:Panel ID="panel" style="display:none" runat="server">
        <div id="login">
        <table align="center"><tr><td><b>Username:</b></td><td><asp:TextBox ID="txtusername" runat="server"></asp:TextBox></td></tr>
        <tr><td><b>Password:</b></td><td><asp:TextBox ID="txtpassword" runat="server" TextMode="Password"></asp:TextBox></td></tr>
        <tr><td></td><td><asp:Button ID="btnlogin" runat="server" Text="Login" /><asp:Button ID="btnclose" runat="server" Text="Close" /></td></tr>
        <tr><td>&nbsp;</td><td>New User?<br />Click Here For <a href="#">SIGN UP</a><b></b></td></tr>

Run the project and check the result.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.