<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js run</title>
</head>
<style type="text/css">
.div1 {
background-color: #555555;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: none;
filter: Alpha(opacity = 30);
}
.div2 {
width: 300px;
height: 200px;
position: absolute;
z-index: 2;
display: none;
border: 3px inset blue;
background-color: #9999CC;
}
</style>
<script type="text/javascript">
//显示的方法，说明：前缀的div1、div2、body等，均为Id值
function show() {
div1.style.display = "inline";
//设置层1显示 div1.style.width=body.clientWidth;
//设置层1宽度等于body宽度，width=100%也可以，不过有一些误差，所以最好用这个
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";
}
</script>
<body bgcolor="#C0C0C0" id="body">
<!--测试按钮点击触发show()方法-->
<input type="button" value="测试按钮" onClick="show()" />
<div id="div1" class="div1"></div>
<!--这是要覆盖网页的层，不必写任何东西-->
<div id="div2" class="div2">
<!--这是弹出的模式窗口层-->
<!--嵌套在层中的层，用来做标题栏，按个人需求定义-->
style="width: 100%; height: 20px; background-color: #0099FF"
align="right">
<label onClick="closeShow()"
style="font-weight: bolder; cursor: hand"> 关闭 <!--用来关闭显示，在label中加了onclick事件，与鼠标悬停手的样式-->
</label>
</div>
<input type=text> </br> <input type=text>
</div>
</body>
</html>