DIV模式窗口的实现

在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>

posted on 2007-03-25 20:32  myer  阅读(1891)  评论(5)  编辑  收藏  举报

导航