<div id="boxes">
 
<!-- Start of Login Dialog -->  
<div id="dialog1" class="window"> 
  <div class="d-header"> 
    <input type="text" value="username" onclick="this.value=''"/><br/> 
    <input type="password" value="Password" onclick="this.value=''"/>    
  </div> 
  <div class="d-blank"></div> 
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div> 
</div> 
<!-- End of Login Dialog -->
<div id="mask"></div>
</div>

<p class="lg"><a href="#dialog1" name="modal"><b>Log in</b></a></p>

  <style type="text/css">
  #mask {
  position:absolute;
  left:0;
  top:0;
  z-index:200;
  background-color:#000;
  display:none;
}
 
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:220;
  padding:20px;
}
 
#boxes #dialog1 {
  width:375px;
  height:203px;
}
 
#dialog1 .d-header {
  background:url(images/formlog2.png) no-repeat 0 0 transparent; 
  width:400px; 
  height:220px;
}
 
#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}
 
#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}
 
#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
  margin-top: -13%;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
 
$(document).ready(function() {	
 
	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
 
		//Get the A tag
		var id = $(this).attr('href');
 
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
 
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
 
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
 
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
 
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
 
		//transition effect
		$(id).fadeIn(2000); 
 
	});
 
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
 
		$('#mask').hide();
		$('.window').hide();
	});		
 
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
 
});
 
</script>