0

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>
2
Contributors
5
Replies
19
Views
3 Years
Discussion Span
Last Post by Kleon
0

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

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

    }
}
0

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

0

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.

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.