网页开发笔记【一】创建一个半透明的页面

浏览数：38 / 时间：2015年06月09日

近来正在温习网页制作，系列《网页开发笔记》记录本人在解决网页开发过程中遇到的问题以及解决方案。

半透明的页面在网页开发中使用的比较广泛，尤其在web app中，这种设计使用的地方更为广泛，本文记录这种半透明的页面的开发方法。

半透明页面常用于用户注册，这时候弹出一个页面能在不离开当前页面的情况下完成注册。

如百度的登陆界面所示。

我的处理方法如下：

首先在页面写一个div，这个div平时display设置为none，当需要的时候设置为display:block;

这个div（设其id为popup）为实际的登陆面板（也就是上图的白色区域）的容器。

则popup的css代码如下：

.popup{
position:fixed;
left:0px;
top:0px;
padding:0px;
border:none;
margin:0px;
background:black;
opacity:0.5;
}

div设置为fixed方式定位，相对body进行定位。

然后注意这个popup的宽度和高度并没有设置，我们可以在window.onload事件中来设置popup的宽度和高度。

javascript代码如下：

window.onload = function()
{
var height = Math.max(document.body.clientHeight,document.documentElement.clientHeight);
var width = Math.max(document.body.clientWidth,document.documentElement.clientWidth);

var obj = document.getElementById("popup");
obj.style.width=width+"px";
obj.style.height=height+"px";
}

这里面值得注意的是：var height = Math.max(document.body.clientHeight,document.documentElement.clientHeight);

这段代码的原因是这样的：

因为w3c的标准的原因，不同的浏览器以及加不加DOCTYPE都有区别：http://hi.baidu.com/bluedream_119/item/26db5a73c9774344ee1e532a

此外，关于clientTop，clientWidth等参数的含义参考这篇文章：http://blog.csdn.net/xuantian868/article/details/3116442

完整的示例代码如下：

 1 <!DOCTYPE html> 
 2 
 3 <html>
 4 <head> 
 5     <title>Demo1</title>
 6 </head>
 7 
 8 <script type="text/javascript">
 9 window.onload=function()
10 {
11 var height = Math.max(document.body.clientHeight,document.documentElement.clientHeight);
12 var width = Math.max(document.body.clientWidth,document.documentElement.clientWidth);
13 
14 var obj = document.getElementById("div1");
15 obj.style.width=width+"px";
16 obj.style.height=height+"px";
17 }
18 </script>
19 
20 <style type="text/css">
21 
22 .wrapper{
23  width:100%;
24  height:2000px;
25  padding:0px;
26  margin:0px;
27  border:none;
28  background:green;
29 }
30 
31 
32 .trans{
33 position:fixed;
34 left:0px;
35 top:0px;
36 padding:0px;
37 border:none;
38 margin:0px;
39 background:black;
40 opacity:0.5;
41 }
42 
43 .addplan{
44 background:white;
45 }
46 </style>
47 
48 <body class="wrapper">
49 <div id="div1" class="trans">
50 </div>
51 </body>
52 </html>