Thursday 20 February 2014

Modal-popup in asp.net

--> If you want to create a Ajax modal-popup in your website(As log in form) that time do following

-->First copy following css class in .aspx head tag
------------------------------------------------------------------------------------------------
<style type="text/css" >
            .modalBackground { 
            background-color:Black; 
            filter:alpha(opacity=70); 
            opacity:0.7; 
            } 
            .corner {
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 20px;
            }
           .roundedcorner
           {
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 20px;
          }
</style>

--> Next , Following code copy in your .aspx file
------------------------------------------------------------------------------------------------
<asp:Panel ID="pnlProject" runat="server" Width="500px" BackColor="White"
        CssClass="roundedcorner">
    <table  align="right" width="475px">
        <tr>
            <td colspan="3" align="right">
            <asp:ImageButton ID="ibClose" runat="server" CssClass="close"
            ImageUrl="~/Database_Code/x.png" />
            </td>
            <tr>
                <td colspan="3">
                        <h3>
                        <asp:Label ID="Label15" runat="server" Font-Names="Arial Narrow"
                            Text="Log In Here"></asp:Label>
                    </h3>
                </td>
            </tr>
            <tr>
            <td colspan="3">
                <hr color="Brown" />
            </td>
            </tr>
                <tr>
                <td>
                    <asp:Label ID="Label7" runat="server" Text="User Id"></asp:Label>
                </td>
                <td colspan="2">
                    <asp:TextBox ID="txtUser" runat="server"></asp:TextBox>
                </td>
            </tr>
     <tr>
                <td>
                    <asp:Label ID="Label7" runat="server" Text="Password"></asp:Label>
                </td>
                <td colspan="2">
                    <asp:TextBox ID="txtUserPws" TextMode="Password" runat="server"></asp:TextBox>
                </td>
            </tr>
    <tr>
                     <td colspan="3">
                    <asp:Button ID="btnLogin" Text="Log In" onclick="btnLogin_Click"  runat="server"></asp:TextBox>
                </td>
            </tr>
          
            <tr>
                <td colspan="2">
                    <hr color="Brown" />
                </td>
            </tr>

    </table>
    </asp:Panel>

<br />
        <asp:Button ID="btnProjInfo" Text="ok" runat="server" />

        <cc1:ModalPopupExtender ID="btnManageRole_ModalPopupExtender" runat="server" PopupControlID="pnlProject"
            CancelControlID="ibClose" BackgroundCssClass="modalBackground" DynamicServicePath=""
            Enabled="True" TargetControlID="btnProjInfo" />

--> when you click on log in button then display popup for log in .

No comments:

Post a Comment



Asp.net tutorials