here's my following that'll display a modal login
Code:
<!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>
I want to swap this
Code:
<li class='last'><a href="#login-box" class="login-window"><span>LOG IN</span></a></li>
with a logout link when you click the log in button when you open the modal
also when you click to logout, it will display the login again

can anyone help me on this