div悬浮窗口设计来完成注册页面

login.jsp页面

<script type="text/javascript" src="js/register.js"></script>

<style type="text/css">

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}

</style>

<p style="padding-top: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 210px;"><a href = "JavaScript:void(0)" onclick = "openDialog()">免费注册</a></p>
<div id="light" class="white_content">
<table style="margin-left: 225px;">
<tr>
<div style="float:right"><a href = "javascript:void(0)" onclick = "closeDialog()">返回登录</a></div>
<div style="text-align:center"><font size="5">欢迎来到注册界面</font></div>
</tr>
<tr>
<tr>
<td>用户名：</td>
<td> <input type="text" name="r_name" id="r_name" onblur="CheckUserName()">
<span id="span01"></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="r_password" id="r_password" placeholder="密码长度4`8位" onblur="CheckPassword()">
<span id="span02"></span><br></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="r_affirmpassword" id="r_affirmpassword" onblur="affirmCheckPassword()">
<span id="span03"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td> <input type="text" name="r_email" id="r_email" onblur="CheckEmail()">
<span id="span04"></span><br></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" name="r_phone" id="r_phone" onblur="CheckPhone()">
<span id="span05"></span></td>
</tr>
<tr>
<td><input type="reset" value="重置"onclick="funClear()"></td>
<td style="padding-left:120px">
<input type="submit" value="注册" onclick="validateregisterInput()">
</td>
<span id="span06"></span>
</tr>
</table>
</div>
<div id="fade" class="black_overlay"></div>

js文件夹下register.js

function openDialog(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function closeDialog(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}