How to use ModalPopupExtender Ajax control in Asp.net OR ModalPopupExtender Ajax control Example

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

Description:

In the last article I have explained How to use Ajax NumericUpDownExtender control in Asp.net OR Ajax NumericUpDown control Example, How to useAutoCompleteExtender Ajax control in Asp.net, How to use TabContainer AjaxControl in Asp.net.

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">

    #login

    {

    min-width:200px;

    height:110px;

    background-color:#c2e4f0;

    border:1px solid;

    padding:15px 15px;

    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(75, 31, 57, 0.8);

    }

    .modal

    {

    background-color:#333333;

    filter:alpha(opacity=70);

    opacity:0.7;

    }   

    </style>

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:ScriptManager>

        <asp:Button ID="btnlog" runat="server" Text="Login" />

        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnlog" PopupControlID="panel" CancelControlID="btncancel" BackgroundCssClass="modal">

        </asp:ModalPopupExtender>

        <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>

        </table>

        </div>

        </asp:Panel>

Run the project and check the result.