在126邮箱和其他网站经常看到在页面中弹出的窗口，当然sina的blog也是当你点击一个按钮是弹出一个对话框，这时其他操作都不能进行。跟c/s架构中的模式窗口一样，自己在做项目中正好要用到所以就仔细的看看了，原来是用到Div层来实现的。当一个层在最上方时他下一层的表单是不能进行任何操作的。
下面是我做的一个简单的例子：
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language="javascript">
function show(){
bg.style.visibility="visible";
}
function hide(){
bg.style.visibility="hidden";
}
</script>
</head>
<body>
<form method="POST" action="--WEBBOT-SELF--">
<input type="submit" value="提交" name="B1">
<div id="bg" style="position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:#FFFFFF;filter:Alpha(opacity=80);visibility:visible;">
<div id="msg" style="position:absolute;width:366px;height:200px;background-color: #FF0000;border-style:solid;">
<input type=button value="测试数据" onclick="hide()"></div>
</div>
</form>
</body>
</html>
|