JSP实现弹出登陆框以及阴影效果

<style>
 .win {
  POSITION:absolute; left:55%; top:60%;
  width:400px; height:250px;
  margin-left:-300px;margin-top:-200px; border:1px solid #888;
  background-color: #d6cfcb; text-align: center;
  line-height: 60px; z-Index:3;
 }
</style>

<script>
 function openLogin(){
  document.getElementById("win").style.display="";
 }
 function closeLogin(){
  document.getElementById("win").style.display="none";
 }
</script>

<div id="win" class="win" style="display:none">
  <form action="javascript:jump();" method="post">
  <span style="font-size: 20px;"> 欢迎登陆网上书店 </span> <br />
  <label class="label"> 用户名: </label> <input type="text" class="input" id="user" /> <br />
  <label class="label"> 密码: </label> <input type="password" class="input" id="psw" /> <br />
  <input type="reset" value="重输" class="input1" />
  <input type="button" value="退出" class="input3" onclick="closeLogin();" />
  <input type="submit" value="确定" class="input2" />
  </form>
 </div>
 <a href="javascript:openLogin();" >打开</a>
 <a href="javascript:closeLogin();" >关闭</a>

<style>
.hidebg {
  position:absolute; left:0px; top:0px;
  background-color:#000;
  width:100%;
  filter:alpha(opacity=60);
  opacity:0.6;
  display:none;
  z-Index:2;
 }
</style>

function openLogin(){
 document.getElementById("hidebg").style.display="block";
 document.getElementById("hidebg").style.height=document.body.clientHeight+"px";
}
function closeLogin(){
 document.getElementById("hidebg").style.display="none";
}

<div id="hidebg" class="hidebg"></div>