Wednesday, July 31, 2013

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:

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.


No comments:

Post a Comment