Description:-
In This Example we explain that how to create a nice
looking Popup or Fancy Sign-up and Login Pop-up Boxes with nicely faded background using Jquery.
The main Advantages
of this Fancy Popup Boxes is that all Browser support this type of
functionality so you did not worry about installation or configuration of the
server.
In which when user Click on Login then Dropdown For Login is Appered
below the Dropdown of Login.
This is the one kind of Designing Facility provide by every website
Today.so we can create our Application more and more Attractive.
Here we Define a CSS for Creating a Design of the Dropdown of the Login
popup andwe use the Jquery to provide Dropdown popup Functionlity of Login and
Signup to the User.
to show Example of Send SMS to user click here Send SMS to user
to show Example of How to Rotate the Ads without refreshing the page Rotate the Advertisement in asp.net
loginpopup.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="loginpopup.aspx.cs" Inherits="loginpopup" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
nav li {
float: left;
}
nav #login {
border-right: 1px solid #ddd;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
background: #eee;
}
nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #444444;
background:#eeeeee;
}
nav #signup a {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
background: #eeeeee;
}
nav #login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
background:#E7A34C;
color:#ffffff;
}
nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E7A34C), to(#fff));
background-image: -webkit-linear-gradient(top, #E7A34C, #fff);
background-image: -moz-linear-gradient(top, #E7A34C, #fff);
background-image: -ms-linear-gradient(top, #E7A34C, #fff);
background-image: -o-linear-gradient(top, #E7A34C, #fff);
background-image: linear-gradient(top, #E7A34C, #fff);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}
nav li #login-content {
right: 0;
width: 280px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
margin: 10px 0 0 0;
}
#login .submit
{
background-color: #3F80EC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f06015), to(#f88e11));
background-image: -webkit-linear-gradient(top, #f06015, #f88e11);
background-image: -moz-linear-gradient(top, #f06015, #f88e11);
background-image: -ms-linear-gradient(top, #f06015, #f88e11);
background-image: -o-linear-gradient(top, #f06015, #f88e11);
background-image: linear-gradient(top, #f06015, #f88e11);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}
#login .submit:hover,
#login .submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background-image: -webkit-linear-gradient(top, #f88e11, #f06015);
background-image: -moz-linear-gradient(top, #f88e11, #f06015);
background-image: -ms-linear-gradient(top, #f88e11, #f06015);
background-image: -o-linear-gradient(top, #f88e11, #f06015);
background-image: linear-gradient(top, #f88e11, #f06015);
}
#login .submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login .submit::-moz-focus-inner {
border: none;
}
#login label {
float: right;
line-height: 30px;
}
#login label input {
position: relative;
top: 2px;
right: 2px;
}
</style>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function ()
{
$('#login-trigger').click(function ()
{
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if
($(this).hasClass('active'))
$(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
</head>
<body>
<form runat="server">
<div>
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<fieldset id="inputs">
<asp:TextBox ID="txtUserName" runat="server" placeholder="Your
email address" type="email"></asp:TextBox>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="Password"></asp:TextBox>
</fieldset>
<fieldset id="actions">
<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="submit"
></asp:Button>
<asp:CheckBox ID="chkRemember" runat="server" Checked="true"></asp:CheckBox>Remember
me
</fieldset>
<a href="#" style="float:right;">Forgot
password?</a>
</div>
</li>
<li id="signup">
<a href="#">Sign
up</a>
</li>
</ul>
</nav>
</div>
</form>
</body>
</html>
Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!
ReplyDeleteoutsourcingall.com "Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it.
ReplyDeleteThis paragraph gives clear idea for the new viewers of blogging, Thanks you. You’re doing a great job Man, Keep it up.
web hosting service in bangladesh