ASP.net Jquery Modal Pop Up Help

Question

Kleon 0 Light Poster

11 Years Ago

Hi guys, i need help with modal popup, i have already create modal pop up, but what i want is that tha modal page to show up just for 5 seconds than automatically to be removed.
Heres My code...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jquery damo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
text-align: justify;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
    $(function () {
        var overlay = $('<div id="overlay"></div>');
        overlay.show();
        overlay.appendTo(document.body);
        $('.popup').show();
        $('.close').click(function () {
            $('.popup').hide();
            overlay.appendTo(document.body).remove();
            return false;
        });

        $('.x').click(function () {
            $('.popup').hide();
            overlay.appendTo(document.body).remove();
            return false;
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div class='popup'>
<div class='cnt223'>
<img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
<p>
Welcome to my Website
<br/>
<br/>

</p>
</div>
</div>
    </form>
</body>
</html>

asp.net jquery

2 Contributors
5 Replies
475 Views
8 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by Kleon

JorgeM 958 Problem Solver

11 Years Ago

To auto close the modal popup after 5 seconds, just add a function that will be used to hide it, and use the setTimeOut method.

<script type='text/javascript'>
    $(function () {
        var overlay = $('<div id="overlay"></div>');
        overlay.show();
        overlay.appendTo(document.body);
        $('.popup').show();
        $('.close').click(function () {
            $('.popup').hide();
            overlay.appendTo(document.body).remove();
            return false;
        });
        $('.x').click(function () {
            $('.popup').hide();
            overlay.appendTo(document.body).remove();
            return false;
        });

        function hideModal() {
            $('.popup').hide();
        }

        var t = setTimeout(function () { hideModal() }, 5000);
    });
</script>

JorgeM 958 Problem Solver

11 Years Ago

You need to give it a little more effort so you can really learn well. I'm no expert by any means, but all i did was basically merge the the code above with the code below, nothing special..

CODE for ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 <style type="text/css">
     .auto-style1 {font-size: x-large;}
        .auto-style2 {width: 100%;}
        .auto-style3 {width: 86px;text-align: right;}
        .auto-style4 {width: 203px;}
        .auto-style5 {width: 86px;text-align: right;height: 30px;}
        .auto-style6 {width: 203px;height: 30px;}
        .auto-style7 {height: 30px;}
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            filter:alpha(opacity=70);
            -moz-opacity:0.7;
            -khtml-opacity: 0.7;
            opacity: 0.7;
            z-index: 100;
            display: none;
            }
        .cnt223 a{
        text-decoration: none;
        }
        .popup{
        width: 100%;
        margin: 0 auto;
        display: none;
        position: fixed;
        z-index: 101;
        }
        .cnt223{
        min-width: 600px;
        width: 600px;
        min-height: 150px;
        margin: 100px auto;
        background: #f3f3f3;
        position: relative;
        z-index: 103;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 5px #000;
        }
        .cnt223 p{
        clear: both;
        color: #555555;
        text-align: justify;
        }
        .cnt223 p a{
        color: #d91900;
        font-weight: bold;
        }
        .cnt223 .x{
        float: right;
        height: 35px;
        left: 22px;
        position: relative;
        top: -25px;
        width: 34px;
        }
        .cnt223 .x:hover{
        cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>

    <form id="form1" runat="server">
            <button id="btn1">Click Here To Login</button>
        <div class="popup">
          <div class='cnt223'>
         <img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
        <fieldset style="width:500px;" >
            <legend>Your Login Information</legend>
        <div>
        <span class="auto-style1">Login Page<br />
        <br />
        </span>
        <asp:Label ID="Label1" runat="server" Visible="False"></asp:Label>
        <br />
        <table class="auto-style2">
            <tr>
                <td class="auto-style3">UserName</td>
                <td class="auto-style4">
                    <asp:TextBox ID="TextBox1" runat="server" MaxLength="15" Width="180px"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="You must Type your UserName" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style3">Password</td>
                <td class="auto-style4">
                    <asp:TextBox ID="TextBox2" runat="server" MaxLength="15" TextMode="Password" Width="180px"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2" ErrorMessage="You must Type your Password" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style5"></td>
                <td class="auto-style6">
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Login" Width="100px" />
                </td>
                <td class="auto-style7"></td>
            </tr>
            <tr>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style4">&nbsp;</td>
                <td>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Registration.aspx">New User, Register Here</asp:HyperLink>
                </td>
            </tr>
        </table>
    </div>
        </fieldset>
            </div>
            </div>
    </form>
    <script>
        $(function () {
            $('#btn1').click(function () {
                var overlay = $('<div id="overlay"></div>');
                overlay.show();
                overlay.appendTo(document.body);
                $('.popup').show();
                $('.close').click(function () {
                    $('.popup').hide();
                    overlay.appendTo(document.body).remove();
                    return false;
                });
                $('.x').click(function () {
                    $('.popup').hide();
                    overlay.appendTo(document.body).remove();
                    return false;
                });
                return false;
            });
        });
</script>
</body>
</html>

Screenshots..

When you first load the page...

80bb9192795b5774d8cfbd87474d4d01

Click on the Login Button

1fe9cf349b67a1556a131a51b9c4e5f3

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Kleon 0 Light Poster · Answer 1 · 2013-10-30T20:32:39+00:00

Thanks a lot, mr JorgeM, another help please i have a login page in my project which is connected with sql database, and i want to do that one with ModalPopup too, can you help me with this too.
So when a press a button Login the ModalPopUp Form to be showed.
Heres the code for my Login page,

LoginPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            font-size: x-large;
        }
        .auto-style2 {
            width: 100%;
        }
        .auto-style3 {
            width: 86px;
            text-align: right;
        }
        .auto-style4 {
            width: 203px;
        }
        .auto-style5 {
            width: 86px;
            text-align: right;
            height: 30px;
        }
        .auto-style6 {
            width: 203px;
            height: 30px;
        }
        .auto-style7 {
            height: 30px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <fieldset style="width:500px;" >
            <legend>Your Login Information</legend>
        <div>

        <span class="auto-style1">Login Page<br />
        <br />
        </span>
        <asp:Label ID="Label1" runat="server" Visible="False"></asp:Label>
        <br />
        <table class="auto-style2">
            <tr>
                <td class="auto-style3">UserName</td>
                <td class="auto-style4">
                    <asp:TextBox ID="TextBox1" runat="server" MaxLength="15" Width="180px"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="You must Type your UserName" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style3">Password</td>
                <td class="auto-style4">
                    <asp:TextBox ID="TextBox2" runat="server" MaxLength="15" TextMode="Password" Width="180px"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2" ErrorMessage="You must Type your Password" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style5"></td>
                <td class="auto-style6">
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Login" Width="100px" />
                </td>
                <td class="auto-style7"></td>
            </tr>
            <tr>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style4">&nbsp;</td>
                <td>
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Registration.aspx">New User, Register Here</asp:HyperLink>
                </td>
            </tr>
        </table>

    </div>
        </fieldset>
    </form>
</body>
</html>

LoginPage.cs

protected void Button1_Click(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["RegConnectionString"].ConnectionString);
        con.Open();
        string cmdStr = "Select count(*) from Registration where UserName ='" + TextBox1.Text + "'";
        SqlCommand CheckUser = new SqlCommand(cmdStr,con);
        int temp = Convert.ToInt32(CheckUser.ExecuteScalar().ToString());
        if (temp == 1)
        {
            string cmdStr2 = "Select Password from Registration where UserName='" + TextBox1.Text + "'";
            SqlCommand pass = new SqlCommand(cmdStr2, con);
            string password = pass.ExecuteScalar().ToString();
            con.Close();

            if (password == TextBox2.Text)
            {
                Session["New"] = TextBox1.Text;
                Response.Redirect("Default.aspx");
            }
            else
            {
                Label1.Visible = true;
                Label1.Text = "Invalid Password";
            }
        }
        else
        {
            Label1.Text = "Invalid UserName";
        }

    }
}

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 2 · 2013-10-31T00:50:43+00:00

My suggestion to you is for you to focus on getting your original question/issue resolved, and when it is, set this thread to solved. Then if you have additional questions, start a new thread. Otherwise, these threads can become very legnthy covering multiple topics. With multiple questions in the same thread, it may not be as helpful and somewhat confusing for others that come here for help.

Kleon 0 Light Poster · Answer 3 · 2013-10-31T01:23:52+00:00

It Rocks JorgeM thanks a lot you are fantastic, thank you thank you..