<%@ 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>