Strange problem with modal (jquery) window

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 

<script> 
 
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script> 

<style> 
body {
font-family:verdana;
font-size:15px;
}
 
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
 
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
 
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
 
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
 
#boxes #dialog1 {
width:375px;
height:203px;
}
 
#dialog1 .d-header {
background:url(images/login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}
 
#dialog1 .d-header input {
position:relative;
top:60px;
left:100px;
border:2px solid #EB0873;
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;
}
 
</style> 

<ul> 
<li><a href="[(site_url)][!SelfReference!]#dialog1" name="modal">click m3 -></a></li> 
</ul> 
 
 
<div id="boxes"> 
<div id="dialog1" class="window"> 
<div class="d-header"> 
<form action="index.php" > 
<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"/></form></div> 
</div> 
<div id="mask"></div> 
</div>