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

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

 

半透明的页面在网页开发中使用的比较广泛,尤其在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>

 

 至此,半透明的页面完成了。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。