标签：des style blog http color os io 使用 java
近来正在温习网页制作，系列《网页开发笔记》记录本人在解决网页开发过程中遇到的问题以及解决方案。
半透明的页面在网页开发中使用的比较广泛，尤其在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>
至此，半透明的页面完成了。
标签：des style blog http color os io 使用 java
原文地址：http://www.cnblogs.com/pureqq/p/3952318.html
