User Id :    Password :      New Member   Forgot Password  
Topic: How to show a popup window or a popup div in the center of the window.
Shahnila181
29 Apr 2010 at 02:52 AM
Hi !

I want to know that how can I program my Login Panel if it contain Username and password and LogIn button and I want this panel come up in mid of screen as seprate pop up window type and close if close icon is pressed , I have tried many sample of Overlay div but it is not working If any body has worked on such type of sample plz send me code, I need it urgently,
Thankx in advance
Re: How to show a popup window or a popup div in the center of the window.
Parul
14 Dec 2011 at 02:35 AM

HI

you can use modal pop up extender to fulfil your requirement

Re: How to show a popup window or a popup div in the center of the window.
Mumtahina Porween
15 Jul 2013 at 04:24 AM

Hi Shahnila,

U just do one thin take two div in your login.aspx page and put coding as below....

<div id="backgroundPopup" style="position: fixed; z-index: 100; top: 0; left: 0;
    height: 100%; width: 100%; background: #000000; filter: alpha(opacity=75); -moz-opacity: 0.75;
    opacity: 0.75;" runat="server">
</div>
<div id="popupWindow" style="position: fixed; z-index: 102; height: 100px; width: 400px;
    left: 50%; top: 50%; background: #FFFFFF; margin-left: -200px; margin-top: -50px;
    overflow: auto; border: 1px solid #ccc;" runat="server">
    <div id="div_top" style="position: fixed; z-index: 102; height: 30px; width: 400px;
        left: 50%; top: 50%; background: #FFFFFF; margin-left: -200px; margin-top: -79px;
        background-color: #A82626;" runat="server">
        <table align="right">
            <tr>
                <td align="right" valign="top" colspan="2">
                    <asp:LinkButton runat="server" ToolTip="Close" ID="LinkButton1" Style="margin-left: 0px;
                        cursor: pointer" OnClick="lnkCloseModal_Click">
                        <img src="images/dialog_cancel.png" style="height:30px;border:0px;" />
                    </asp:LinkButton>
                </td>
            </tr>
        </table>
    </div>
    <table>
        <tr>
            <td>
                User Name:
            </td>
            <td>
                <asp:TextBox ID="txt_username" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Password:
            </td>
            <td>
                <asp:TextBox ID="txt_password" runat="server" TextMode="Password"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btn_submit" runat="server" Text="Submit" />
            </td>
        </tr>
    </table>
</div>
 

 

 

and write code in login.aspx.cs as below

 

 protected void lnkCloseModal_Click(object sender, EventArgs e)
    {
        backgroundPopup.Visible = false;
        popupWindow.Visible = false;
    }

 

 

I hope,this must be helpful to u....All the best

 

 

Total Replies: 2
 
Featured Text Ad

Featured Ad