有关JSP页面中的javascript无法正确执行的问题

1.index.jsp
<%--
Document : index
Created on : 2010-10-6, 9:07:20
Author : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
弹出式登陆窗口测试
</title>
<link type="text/css" rel="stylesheet" href="css.css" />
<script type="text/javascript" src="js.js"></script>
</head>
<body id="body">
<!--测试按钮点击触发show()方法-->
<a href=# onClick="show()">登录</a>
<div id="div1" class="div1"></div><!--这是要覆盖网页的层，不必写任何东西-->
<div id="div2" class="div2"><!--这是弹出的模式窗口层-->
<!--嵌套在层中的层，用来做标题栏，按个人需求定义-->
<div id="div3" style="width:100%;height:20px; background-color:#0099FF" align="right">
<label onClick="closeShow()" style="font-weight:bolder;cursor:hand">
关闭 <!--用来关闭显示，在label中加了onclick事件，与鼠标悬停手的样式-->
</label>
</div>
<div>
<iframe src="login.jsp" width="400" height="280"/>
</div>
</div>
</body>
</html>


2.login.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
用户登录
</title>
</head>
<body>
<form action="login.jsp" method="post">
<label>用户名</label><input type="text" name="username"/><br>
<label>密码:</label><input type="password" name="pswd"/><br>
<input type="submit" name="Submit" value="登录"/>
<input type="reset" name="Reset" value="重置"/>
</form>
</body>
</html>


3.js.js
function show()
{
div1.style.display="inline";//设置层1显示
div1.style.width=body.clientWidth;//设置层1宽度等于body宽度
div1.style.height=body.clientHeight;//设置层1高度满屏
div2.style.display="inline";//设置层2的显示
div2.style.top=body.clientHeight/2-div2.clientHeight/2;//设置层2的距顶位置居中算法
div2.style.left=body.clientWidth/2-div2.clientWidth/2;//设置层2的距左位置居中算法
}

//关闭显示
function closeShow()
{
div1.style.display="none";
div2.style.display="none";
}


4.css.css

/*
Document : css
Created on : 2010-10-6, 9:10:12
Author : Administrator
Description:
Purpose of the stylesheet follows.
*/

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

.div1{
/*本层要实现覆盖模式窗口以外全部内容的半透明效果*/
background-color:gray;/*背景色*/
position: absolute ;/*绝对定位，必选，使层绝对依照top,left的标准显示，否则将不能实现覆盖*/
top:0;/*层与页面顶部距离*/
left:0;/*层与左侧边距离*/
z-index:1;/*当发生重叠时的优先级，数大的会覆盖数较小的，没进行设置的均可视为小于0*/
display:none; /*层是否可见，初始化none不可见*/
filter:Alpha(opacity=30);/*过滤颜色，设置透明度（可见度）30，数越小越透明*/
}

/*层2的样式*/
.div2{
/*本层显示在最前端，其它控件均不可用*/
width:400px;/*显示宽度*/
height:300px;/*显示高度*/
position:absolute;/*绝对定位*/
z-index:2;/*优先级*/
display: none;/*是否显示*/
border:3px inset blue; /*边框：宽度，样式，颜色*/
background-color:white;/*背景色*/
}

网页的目的就是为了在jsp中用javascript实现弹出式登录窗口（借鉴的网上的代码），可是执行结果却是有弹出窗口，但是并无遮罩层（也挡不住窗口后面的东西），而且弹出窗口的位置并不是居中，而是随代码在页面中的位置的变化而变化。
我检查了很多次，代码应该没有问题，因为当我把主页的后缀改为.html（即将index.jsp改为index.html）时就能正确执行，经过几十次的失败，我怀疑是JSP与javascript之间的问题，我知道它们一个在服务器执行，一个在客户端执行，但是到底是一种什么关系呢？即在什么情况下JSP页面中的javascript会失效，又在什么情况下能正确执行呢？又或者不是这个问题，而是其它的问题呢？帮忙，快疯掉了。。。