swapping login with logout
this code will display a login popup when you click on sign in menu:
- <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
- .login-popup{
display:none;
border: 5px double #060;
float: left;
font-size: 16px;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
border-radius:10px;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
background-color: #96C;
height: 400px;
;
width: 550px;
margin-right: 10px;
margin-left: 10px;
}
- img.btn_close {
float: right;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 0;
margin-left: 0;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
- fieldset {
border:none;
}
- #wrapper {
margin: 0px auto; width: 500px; right: 0px; position: relative; min-height: 560px;
}
#wrapper a {
color: #F00;
text-decoration:none;
}
#wrapper p {
margin-bottom: 15px;
text-align: center;
}
#wrapper p:first-child {
}
#wrapper label {
color: #003;
position: relative;
}
input {
}
#wrapper input:not([type='checkbox']) {
padding: 10px 5px 10px 32px; border-radius: 3px; border: 1px solid rgb(178, 178, 178); transition:0.2s linear; border-image: none; width: 92%; margin-top: 4px; box-sizing: content-box; box-shadow: inset 0px 1px 4px 0px rgba(168,168,168,0.6); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;
}
#wrapper input:not([type='checkbox']):active {
background: rgba(238, 236, 240, 0.2); border: 1px solid rgba(91, 90, 90, 0.7); border-image: none; box-shadow: inset 0px 1px 4px 0px rgba(168,168,168,0.9); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
#wrapper input:not([type='checkbox']):focus {
background: rgba(238, 236, 240, 0.2); border: 1px solid rgba(91, 90, 90, 0.7); border-image: none; box-shadow: inset 0px 1px 4px 0px rgba(168,168,168,0.9); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
#wrapper select {
padding: 10px 5px 10px 32px; border-radius: 3px; border: 1px solid rgb(178, 178, 178); transition:0.2s linear; border-image: none; width: 92%; margin-top: 4px; box-sizing: content-box; box-shadow: inset 0px 1px 4px 0px rgba(168,168,168,0.6); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;
}
[data-icon]::after {
left: 10px; top: 35px; width: 30px; color: rgb(106, 159, 171); font-family: "FontomasCustomRegular"; position: absolute; content: attr(data-icon);
}
#wrapper p.button input {
padding: 8px 5px;
border-radius: 3px;
border: 1px solid #060;
transition:0.2s linear;
border-image: none;
width: 30%;
color: #000;
font-size: 24px;
margin-bottom: 10px;
cursor: pointer;
-webkit-border-radius: 3px;
background-color: #CC0;
}
#wrapper p.button input:hover {
color: #FFF;
background-color: #060;
}
#wrapper p.button input:active {
border: 1px solid #060;
border-image: none;
top: 1px;
position: relative;
background-color: #990;
}
#wrapper p.button input:focus {
border: 1px solid #060;
border-image: none;
top: 1px;
position: relative;
background-color: #00F;
}
p.button.login {
margin: 5px 0px; text-align: right;
}
</style>
<style type="text/css">
#cssmenu2 {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font-size: 16px;
font-weight: bold;
width: 100%;
float: left;
}
#cssmenu2 ul {
height: 35px;
list-style: none;
margin: 0;
padding: 0;
background-color: #9FF;
}
#cssmenu2 li {
float: left;
padding: 0px;
}
#cssmenu2 li a {
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
color: #000;
}
#bottom {
background-color: #9FF;
float: left;
width: 100%;
}
</style>
- <SCRIPT type="text/javascript">
$(document).ready(function() {
$('a.login-window').click(function() {
// Getting the variable's value from a link
var loginBox = $(this).attr('href');
- //Fade in the Popup and add close button
$(loginBox).fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</SCRIPT>
<body>
<div id='cssmenu2'>
<ul>
<li class='last'><a href="#login-box" class="login-window"><span>LOG IN</span></a></li>
<div id="login-box" class="login-popup">
<a href="#" class="close"><img src="../website/sign in/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<DIV class="animate form" id="login">
<DIV id="wrapper">
<FORM action="" autocomplete="on">
<br />
<P><LABEL class="uname" for="username"> YOUR USERNAME: </LABEL>
<INPUT name="username" id="username" required="required" type="text" value="" /></P>
<P><LABEL class="youpasswd" for="password"> YOUR PASSWORD: </LABEL>
<INPUT name="password" id="password" required="required" type="password" value="" />
</P>
<P class="login button"><INPUT type="submit" value="LOG IN" /></P>
<P class="change_link">DON'T HAVE AN ACCOUNT YET?<br />
<A class="to_register" href="../website/sign in/create an account.html">CLICK HERE TO SIGN UP NOW</A></P>
</FORM>
</DIV></div></div>
</ul>
</div>
</body>
</html>
now I just want to know is there any jquery to switch this (sign up):
- <li class='last'><a href="#login-box" class="login-window"><span>LOG IN</span></a></li>
with something like "sign out" link to bring the sign in again